Contrast checker
Choose text and background colors to check their contrast ratio against WCAG AA and AAA thresholds. See separate results for normal and large text, alongside a preview using the selected colors.
What you can do
Check the ratio for two colors
Choose text and background colors and see their contrast ratio to two decimal places.
Compare AA and AAA thresholds
See separate results for normal and large text, with a preview using the selected colors.
Compare against black and white
Open the optional details to compare the text color against black and white backgrounds.
How to use
Enter the text color
Choose HEX, RGB, HSL, HSV or CMYK and enter the text color. Choosing a swatch switches the input to HEX.
Choose the background
Enter a three- or six-digit HEX value, or use the color picker. The # prefix is optional.
Check contrast
Select Check contrast to review the ratio, text preview and AA/AAA results. Check again after changing either color.
When this helps
Check body text on a background
Enter the colors used on a page and check whether normal text meets the required ratio.
Compare heading colors
Use the large-text result and preview when considering a color pair for a heading.
Reading the results
AA and AAA ratios
AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Results use the unrounded ratio.
What counts as large text
Large text is at least 18 pt, or 14 pt bold. In CSS this is 24px, or approximately 18.7px bold. The preview uses normal-weight text at 16px and 24px.
Scope of the check
This checks text contrast between two opaque sRGB colors. It does not assess image backgrounds, alpha blending, non-text elements or whole-page conformance.
Questions and answers
Does a passing ratio mean the whole page conforms?
This result covers text contrast for the two selected colors only. Assess whole-page conformance separately.
What does the black-and-white comparison show?
It compares the selected text color against black and white and shows which has the higher ratio. This is separate from the selected background result.
Can I check transparent text or text over an image?
Alpha and image backgrounds are not supported. Enter opaque text and background colors.
Input and output
- Text color
- HEX, RGB, HSL, HSV or CMYK values, or the color picker. CMYK is an estimate without an ICC profile.
- Background
- Three- or six-digit HEX, or the color picker. Alpha is not supported.
- Result
- Contrast ratio, AA/AAA results for normal and large text, and a text preview. Results are displayed without a save action.