The numbers you need
The Web Content Accessibility Guidelines (WCAG 2.1 and 2.2 use the same contrast rules) define three success criteria for contrast. Most laws and procurement rules point to level AA, so that is the practical target for websites and apps.
To check a pair, type your text color in the tool below (any CSS color works: a hex code, rgb(), hsl() or a name), enter the background color and read the results for each line. Swap exchanges the two, which is handy for dark mode.
| What you are checking | Level AA | Level AAA |
|---|---|---|
| Normal text (body copy, labels, links) | 4.5:1 | 7:1 |
| Large text (24 px regular or about 19 px bold and up) | 3:1 | 4.5:1 |
| Icons, input borders, focus indicators, chart lines | 3:1 | No separate AAA level |
| Logos, decorative images, disabled controls | No requirement | No requirement |
Try it here: Color Contrast Checker
Open the full tool pageHow the contrast ratio is calculated
The ratio compares relative luminance, which is how bright a color appears on a standard sRGB screen, from 0 for black to 1 for white. Each red, green and blue channel is first converted from the 0 to 255 scale to 0 to 1 and linearized (values are raised roughly to the power of 2.4, because screen values are gamma encoded). Then the channels are weighted: luminance equals 0.2126 times red plus 0.7152 times green plus 0.0722 times blue.
The weights explain a lot of surprises. Green contributes most to perceived brightness and blue very little, so pure blue text on black fails badly while yellow on white is nearly invisible (about 1.07:1). The ratio itself is (lighter luminance plus 0.05) divided by (darker luminance plus 0.05). The 0.05 accounts for screen glare and keeps the formula from dividing by zero.
Hue does not appear anywhere in the formula. Two colors can look clearly different, such as red and green, and still have almost the same luminance, which is exactly the combination that people with red green color vision deficiency cannot tell apart.
Real color pairs and their ratios
Gray text is where most designs fail. The threshold sits around #767676 on white: one step lighter and normal text no longer passes AA.
| Text color on white #FFFFFF | Ratio | Result |
|---|---|---|
| #000000 black | 21:1 | Passes AA and AAA |
| #333333 dark gray | 12.63:1 | Passes AA and AAA |
| #595959 gray | 7.0:1 | Passes AAA for normal text |
| #767676 gray | 4.54:1 | Passes AA, the lightest gray that does |
| #777777 gray | 4.48:1 | Fails AA for normal text |
| #999999 light gray | 2.85:1 | Fails AA even for large text |
| #007BFF bright blue | 3.98:1 | Large text only |
| #0066CC blue | 5.57:1 | Passes AA |
| #FF0000 red | 4.0:1 | Large text only |
Which elements need which ratio
- Body text, form labels, link text, placeholder text that carries information, error messages: 4.5:1.
- Headings and other text at 24 px and up, or bold text at about 19 px and up (18.66 px, which is 14 pt): 3:1.
- Text over images or gradients: check the worst spot behind the letters, not the average. Add a solid or semi transparent overlay if needed.
- Input borders, checkbox outlines, toggle states, icons without text, focus rings and lines in charts: 3:1 against the adjacent color (criterion 1.4.11, Non-text Contrast).
- Disabled buttons, inactive controls, logos and pure decoration are exempt. Exempt does not mean invisible: users still need to see that a disabled button exists.
- Links inside text that are identified only by color also need 3:1 against the surrounding text, or an underline.
How to fix colors that fail
Changing the hue rarely helps; changing lightness does. Keep the brand hue and make the text darker (on light backgrounds) or lighter (on dark backgrounds) until it passes. The Shades row under the checker shows nine lighter and darker versions of your color, built in OKLCH so the steps look even; pick the first one that passes and paste it into your design.
If the brand color must stay exactly as it is, use it for large headings, borders or backgrounds of buttons with white or black text, and use a darker variant for small text. Many design systems keep two versions of each brand color for this reason: one for fills and one for text.
Semi transparent text, such as white at 60 percent opacity, is blended with the background first. The checker does this blending, so the ratio shown matches what people actually see. A common surprise: gray text at reduced opacity on a gray card fails even though both colors pass individually against white.
Dark mode, APCA and the law
Dark themes need their own check. Pure white on pure black (21:1) is technically perfect but can cause halation for some readers; off white text such as #E6E6E6 on a dark gray background is often more comfortable and still passes AAA. Do not assume a palette that works in light mode passes in dark mode: muted accent colors often drop below 3:1 on dark surfaces.
You may read about APCA, a newer contrast model proposed for a future WCAG 3. It accounts for font weight and polarity, but it is still a draft. Conformance today is measured with the WCAG 2 ratio, which is what this checker calculates.
WCAG 2.1 level AA is referenced by accessibility laws and standards in many places, including the European standard EN 301 549 used for the European Accessibility Act and public sector rules, and it is commonly used as the benchmark in ADA cases in the United States. If you sell to the public online, contrast is one of the easiest requirements to meet and one of the most frequently reported failures in automated audits.