What the contrast ratio means
The contrast ratio compares how bright the text is with how bright the background is. It runs from 1:1, where both colors are identical, up to 21:1 for black on white. The higher the number, the easier the text is to read for everyone, and especially for people with low vision, older eyes, color blindness or a phone screen in bright sunlight.
WCAG, the Web Content Accessibility Guidelines, defines the formula. Each color gets a relative luminance between 0 for black and 1 for white, based on how sensitive the eye is to red, green and blue. The lighter luminance goes on top:
R, G and B are the linear values of the hex color, so a mid gray like #767676 is darker in luminance than its hex code suggests. That is why the ratio often surprises designers: green looks bright and counts a lot, blue counts very little.
WCAG contrast requirements
WCAG 2.1 and 2.2 set two levels for text. AA is the usual legal and company standard, AAA is the stricter goal for long reading and for audiences with low vision.
| What | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | no extra level |
The rule for UI components (success criterion 1.4.11) covers the parts you need to see to use a control: input borders, checkboxes, icons without text, focus rings and the lines and bars of a chart. The text inside a button follows the text rules.
What counts as large text
Large text is at least 18 point regular or 14 point bold. On the web that is 24px regular or 18.66px bold and up. Bigger and heavier letters stay readable at lower contrast, which is why headings may use 3:1 while body copy needs 4.5:1. A 16px paragraph is never large text, however short it is.
How to fix low contrast
- Change the lightness, not the hue. The fix suggestions above keep your color's hue and saturation in OKLCH and only make it darker or lighter, so your brand color stays recognizable.
- Use two shades of the brand color. Keep the bright one for large areas and buttons with dark text, and a darker one for links and small text.
- Watch light gray. Gray placeholder and caption text is the most common accessibility failure. #767676 is the lightest gray that passes AA on white.
- Check both themes. A color that works on white often fails on a dark background, so test your dark mode pairs too.
A note on WCAG 3 and APCA
WCAG 3 is a working draft that may replace the contrast ratio with APCA, a method that also looks at font size and weight and treats light text on dark backgrounds differently. It is not a standard yet and laws do not reference it, so this checker uses the WCAG 2 ratio that audits and the law rely on today.
How to use the color contrast checker
- 1Pick or type the text color and the background color. Hex, rgb() and color names all work, and the swap button flips them.
- 2Read the contrast ratio and the pass or fail result for AA and AAA, for normal text, large text and UI parts. The preview shows the pair as real text.
- 3If it fails, apply the AA or AAA suggestion, then copy the result or a link to share the colors with your team.
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
Normal body text needs at least 4.5:1 against its background. Large text, meaning 24px regular or about 18.66px bold and up, needs 3:1. Icons, input borders, focus rings and other parts of the interface you need to see to use the page also need 3:1. AA is the level most laws and company policies ask for.
Why does 4.49:1 fail when it is so close to 4.5?
WCAG treats the thresholds as hard minimums and does not allow rounding up. This checker cuts the ratio after two decimals instead of rounding, so a color pair that is a hair below 4.5:1 never shows as passing. #777777 on white is 4.47:1 and fails, while #767676 on white is 4.54:1 and passes.
Do logos, placeholders and disabled buttons have to pass?
Logos and brand names are exempt, and so is text on inactive controls like a disabled button. Placeholder text is not exempt when it carries information people need, so it should reach 4.5:1 too. Purely decorative text and images that nobody needs to read are also exempt.
How does the checker handle transparent colors?
Enter an 8 digit hex code like #00000099 or an rgba() value, and the text color is blended over the background first, the same way a browser draws it. The ratio is then measured on the color you actually see. A transparent background is placed on white.
Will WCAG 3 and APCA replace the contrast ratio?
Maybe one day. WCAG 3 is still a working draft, and its contrast method, APCA, is not final either. Laws and procurement rules such as the ADA, Section 508 and the European Accessibility Act point to WCAG 2.1 or 2.2 level AA, so the 4.5:1 ratio is the number that counts today.