Color Contrast Checker
Type a text color and a background color and see the contrast ratio right away, with WCAG AA and AAA results for normal text, large text and UI components.
| Element | AA | AAA |
|---|---|---|
| Normal text AA 4.5:1 · AAA 7:1 | Fail | Fail |
| Large text AA 3:1 · AAA 4.5:1 | Pass | Fail |
| UI components 3:1 (criterion 1.4.11) | Pass | Not applicable |
Changes only the lightness of the text, until it reaches 4.5:1 with the smallest change possible.
Sample large text
This is sample normal text, to see how the combination reads.
How to use the contrast checker
Type the text color in the first field and the background color in the second. Each field accepts HEX (#5271FF), rgb(), hsl() and the 148 CSS color names, such as tomato. The square next to it opens the system color picker, and the middle button swaps text and background.
The big number is the contrast ratio, from 1:1 (same color) to 21:1 (black on white). The table shows whether it passes AA and AAA for each type of element, and the preview applies the pair to a heading, a paragraph and a button. When the text does not reach 4.5:1, the adjust button darkens or lightens only the text, keeping its hue, until it passes AA with the smallest change possible.
What the contrast ratio is
The ratio compares the relative luminance of the two colors, which measures how light each one looks to the eye. The WCAG 2.2 formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 that of the darker one. The 0.05 avoids dividing by zero and accounts for ambient light reflecting off the screen.
Luminance is 0.2126 × R + 0.7152 × G + 0.0722 × B, with each channel first converted from sRGB to linear light. That conversion divides the value by 12.92 when it is at most 0.04045 and, above that, uses ((value + 0.055) / 1.055) ^ 2.4. Green weighs the most because the eye is more sensitive to it. The original WCAG 2.0 listed 0.03928 instead of 0.04045, and the difference changes no result with 8-bit channels.
The ratio is never rounded up: 4.499 does not pass 4.5. When rounding to two decimals would make a failing pair show the threshold value, the page truncates the number instead of rounding it.
AA and AAA: what each level requires
WCAG has two contrast levels for text. AA, in criterion 1.4.3, asks for 4.5:1 on normal text and 3:1 on large text, and it is the level most often used as a target. AAA, in criterion 1.4.6, asks for 7:1 and 4.5:1. For UI components and graphics, criterion 1.4.11 asks for 3:1 at AA and has no AAA version.
| Element | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | no AAA level |
Not every color has to reach AAA. The W3C itself does not recommend requiring AAA as a general policy for a whole site, because some content cannot meet every criterion at that level.
What counts as large text
It is text of at least 18 pt, or at least 14 pt in bold. In CSS pixels, at 96 dpi, that is about 24 px and 18.66 px. The threshold is lower because big letters stay readable with less contrast. When in doubt, treat the text as normal: 4.5:1 works for any size.
Contrast for components and icons
Criterion 1.4.11 asks for 3:1 for the parts of a component needed to recognize it, such as the border of an input or a checkbox, and for graphics that carry information, such as icons without text and the lines of a chart. It also covers states, such as the focus ring. The text inside the component still follows 4.5:1.
Common contrast mistakes
These four show up often in accessibility reviews:
- Light gray placeholders. A placeholder is text and needs 4.5:1 against the field background, even if it disappears when the person types.
- Text over an image. Contrast changes from point to point, so measure at the worst spot or put a solid or darkened layer behind the text.
- Focus and states without contrast. The focus ring, the border of a selected field and the active icon fall under criterion 1.4.11 and need 3:1.
- Disabled components. WCAG exempts inactive components from the minimum contrast, but gray that is too faint leaves people unsure what is blocked. Logotypes are also exempt, and the text around them is not.
Sources
Checked on November 6, 2026:
Going beyond contrast
Need the code of a color? Use the Color Picker, or convert it with the HEX to RGB converter and the RGB to HEX converter. To see how white and black text contrast on each of the 148 CSS colors, check the HTML color table.