How to use the Contrast Checker
- Enter the text color and the background color.
- Read the contrast ratio and the AA/AAA results for normal text, large text and UI components.
- If it fails, click a suggested color, or drag a lightness slider until it passes.
- Set the preview text size, weight and color vision to see exactly which rule applies, then save the pair or copy the CSS.
Contrast Checker features
- WCAG 2.2 contrast ratio with AA and AAA results for normal text, large text and UI components
- APCA lightness contrast (Lc) from the WCAG 3 draft
- Suggested accessible colors that keep your hue, plus lightness sliders
- Live preview with your text size and weight on text, buttons, inputs and links
- Color blindness simulation for the preview
- Handles transparent text colors by blending them over the background
- Saved pairs in your browser, CSS copy, share links and random accessible pairs
Check color contrast for accessibility
This color contrast checker tells you whether text is readable on its background, using the official WCAG 2.2 contrast formula. Enter a text color and a background color in any format and you instantly see the contrast ratio and a pass or fail for every WCAG level: AA and AAA for normal text, large text and user interface components. It also shows the newer APCA score, so you are ready for where accessibility guidelines are heading.
When a pair fails, you do not have to guess what to change. The checker suggests the closest colors that pass while keeping the same hue, and you can drag a lightness slider until the result turns green.
WCAG contrast requirements
| Content | Level AA | Level AAA | WCAG rule |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 and 1.4.6 |
| Large text (24px, or 18.66px bold and up) | 3:1 | 4.5:1 | 1.4.3 and 1.4.6 |
| UI components and graphics (icons, input borders, focus rings, chart lines) | 3:1 | – | 1.4.11 |
Level AA is the standard most organisations aim for, and it is the level referenced by many accessibility laws and policies, such as the ADA in the United States, Section 508, the European Accessibility Act and EN 301 549. Level AAA is stricter and is recommended for long-form reading and for audiences with low vision.
How the contrast ratio is calculated
First, each color's relative luminance is worked out: how bright it appears, from 0 for black to 1 for white, with green weighted most heavily because our eyes are most sensitive to it. The contrast ratio is then:
(L1 + 0.05) / (L2 + 0.05)where L1 is the lighter color and L2 the darker. The result runs from 1:1 (identical colors) to 21:1 (black on white). If your text color is semi-transparent, the checker first blends it over the background, exactly as the browser would, and checks the color you actually see.
What is APCA?
APCA, the Accessible Perceptual Contrast Algorithm, is a newer contrast method developed for the next generation of accessibility guidelines (WCAG 3). It is based on modern research into how people read text on screens, and it treats dark text on light backgrounds differently from light text on dark backgrounds. The result is a lightness contrast value, Lc, from 0 to about 106:
- Lc 90 and up: preferred for body text.
- Lc 75: minimum for body text and columns of reading text.
- Lc 60: other content text, such as short labels.
- Lc 45: large and bold headings.
- Lc 30: placeholder text, disabled states and non-essential details.
APCA is not yet a legal requirement, so always meet WCAG 2.2 as well. Using both gives you the most reliable picture, especially for dark mode designs, where WCAG 2 can overestimate how readable light text is.
How to fix low contrast
- Click a suggested color. The suggestions keep the hue of your original color and change only its lightness, so your design keeps its character.
- Darken the text or lighten the background (or the reverse for dark themes). Lightness has much more effect on contrast than hue or saturation.
- Make text larger or bolder. Large text only needs 3:1 at level AA, so a heading may pass where body text does not.
- Avoid mid-tone backgrounds. Neither black nor white text reaches 4.5:1 on some medium colors. Choose a lighter or darker background instead.
- Do not rely on color alone. Links, errors and status messages should also use underlines, icons or text. Preview your colors in the built-in vision simulator or the Color Blindness Simulator.
Preview, save and share
The preview shows your colors on headings, body text, small print, buttons, an outline button, an input border and a link, at the text size and weight you choose, so you can see exactly which rule applies. You can also simulate protanopia, deuteranopia, tritanopia and achromatopsia. Save pairs you use often (they are stored in your browser), copy the CSS, or share a link with your team. Need inspiration? Press Random accessible pair for a combination that already passes.
Related tools
Build an accessible palette with the Color Palette Generator, whose Contrast view checks every pair at once, or create a Tailwind scale where each swatch shows the text color that passes with the Tailwind Palette Generator.
Contrast Checker: frequently asked questions
How is the contrast ratio calculated?
It is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. Ratios range from 1:1 (no contrast) to 21:1 (black on white).
Does transparency affect contrast?
Yes. A semi-transparent text color is first blended over the background, and the blended color is used for the check, just as it looks on screen.
What counts as large text?
Text that is at least 24px (18pt) regular, or 18.66px (14pt) bold.
What is APCA?
The Accessible Perceptual Contrast Algorithm, proposed for WCAG 3. It gives a lightness contrast value (Lc) from about 0 to 106. Lc 75 or more suits body text, 60 other content text and 45 large headings. It is not yet a legal requirement, so check WCAG 2.2 as well.
What is a good contrast ratio for text?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. For long reading, aim for 7:1 (AAA). Black on white is 21:1, the maximum.
Does white text on a blue button pass WCAG?
It depends on the blue. Darker blues such as #1D4ED8 pass AA easily, while bright blues such as #3B82F6 fall below 4.5:1 for normal text. Enter your colors to check.
Do logos and decorative images need to meet contrast requirements?
No. WCAG exempts logos, brand names and purely decorative content. Text in images, icons that convey meaning and UI controls do need enough contrast.
Is AA or AAA required by law?
Laws and policies that reference WCAG, such as the ADA guidance in the US and EN 301 549 in Europe, generally require level AA. AAA is recommended but rarely mandatory.