UtilibyWritten by the Utiliby editorial team · Last updated October 26, 2026 · Rules and formulas reviewed October 2026
What this free color contrast checker does
This free online color contrast checker tells you whether a text color is easy enough to read on a background color. Enter two colors and you instantly get the WCAG 2.2 contrast ratio, pass or fail marks for AA and AAA, a score from the newer APCA method and a live preview of normal text, small text and a button outline. If the pair fails, the tool suggests the nearest colors that pass, so you can keep your brand hue and still meet the standard.
Two extra tabs save time on real projects. The palette grid tests every text and background combination in a color palette at once, which is how designers check a brand system or a design token set. The color blind preview shows the same pair as seen with protanopia, deuteranopia, tritanopia and achromatopsia, with the ratio recalculated for each. Everything runs in your browser, so nothing you test is uploaded.
How to use the contrast checker
- Choose colors. Use the pickers or type hex, rgb, hsl or CSS color names. Swap them with one click, or load an example.
- Set the text size and weight. This decides whether WCAG treats the text as large (3:1 for AA) or normal (4.5:1).
- Read the result. The big number is the contrast ratio. The table shows AA, AAA and non-text results, and the APCA card explains what Lc score you reached.
- Fix failures. Use the nearest passing colors, then copy the CSS.
- Test a palette. Open Palette grid, paste your brand colors and scan the matrix for combinations that pass.
- Check color vision. Open Color blind preview to see how the pair holds up.
WCAG contrast requirements at a glance
| Success criterion | Level | What it covers | Required ratio |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Normal text and images of text | 4.5:1 |
| 1.4.3 Contrast (Minimum) | AA | Large text (24 px, or 18.66 px bold) | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | UI components, icons, focus indicators, chart elements | 3:1 |
| 1.4.1 Use of Color | A | Color must not be the only way to show information | No ratio, needs another cue |
| 2.4.13 Focus Appearance (draft) | AAA | Size and contrast of keyboard focus indicators | 3:1 change |
Exemptions: purely decorative text, inactive (disabled) controls, logos and brand names, and text that is part of a picture with no informational purpose do not have to meet the ratios. Everything else on the page, including placeholder text, link text, button labels, error messages and chart labels, does.
How the WCAG contrast ratio is calculated
WCAG converts each 8-bit sRGB channel to a linear value: if the channel divided by 255 is 0.03928 or less, divide it by 12.92; otherwise add 0.055, divide by 1.055 and raise it to the power 2.4. The relative luminance is then L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (Llight + 0.05) ÷ (Ldark + 0.05).
Example: grey #767676 has a luminance of about 0.181. White has a luminance of 1. The ratio is (1 + 0.05) ÷ (0.181 + 0.05) = 4.54, which is just enough for AA. Light grey #9ca3af has a luminance of about 0.36 and gives 2.5:1 on white, a clear fail.
Because green dominates the formula, a green and a red of similar luminance have almost no contrast even when they look very different in hue. That is why hue alone should never carry meaning.
APCA and the future of contrast in WCAG 3
The WCAG 2 ratio is simple but has known weaknesses: it treats dark-on-light and light-on-dark the same, and it over-rates some dark color pairs while under-rating others. APCA (the Advanced Perceptual Contrast Algorithm) models how humans perceive lightness, so its result, Lc, depends on which color is the text. It runs from about 0 to 106 in magnitude, and the required Lc increases for smaller and thinner text.
| APCA Lc (absolute) | Typical use |
|---|---|
| 90 or more | Body text at any size, fluent reading |
| 75 | Body text, about 18 px regular and up |
| 60 | Content text, 24 px regular or 16 px bold |
| 45 | Large headlines, 36 px regular or 24 px bold |
| 30 | Placeholders and disabled text, not for reading |
| 15 | Non-text elements only |
APCA is a draft inside the WCAG 3 work and is not yet a legal standard. Use the WCAG 2 ratio for compliance and APCA as a second opinion. If the two disagree, fix to satisfy both.
How to fix low-contrast colors
- Darken text on a light background. Move the text lightness down until the ratio passes. #767676 is the lightest grey that meets 4.5:1 on white.
- Lighten text on a dark background. Move the lightness up, not the saturation.
- Change the background instead. Sometimes a lighter card or a darker button color is the easier fix, and the tool shows that option too.
- Keep the brand hue. Changing lightness while holding hue and saturation preserves the look of the color.
- Use a different color for small text. It is fine to use a brighter brand color for large headings and a darker tint for body text and links.
- Add an outline or underline. For links in body text, underline them so color is not the only cue.
Common color combinations that fail
| Pair | Ratio | Problem |
|---|---|---|
| Light grey #999 on white | 2.85:1 | Very common for helper text and placeholders |
| White on yellow #ffd60a | 1.4:1 | Use black or very dark text on yellow |
| White on orange #f97316 | 2.8:1 | Darken the orange or use dark text |
| White on bright green #22c55e | 2.3:1 | Use a darker green such as #15803d |
| White on sky blue #38bdf8 | 2.1:1 | Choose a deeper blue for buttons |
| Red #ff0000 on black | 5.25:1 | Passes but vibrates; avoid for long text |
Run your own colors through the palette grid; the surprises are usually in the middle tones, where a color looks bold but lacks lightness difference.
Contrast for buttons, form fields, icons and focus rings
WCAG 1.4.11 applies a 3:1 ratio to the parts of the interface that people need to see in order to use it. That includes the border of a text field (or another cue showing where it is), the unchecked state of a checkbox, an icon with no text label, the segments of a chart, and the visible state of focus and selection. The ratio is measured against the neighbouring colors, so a grey border on a white card must be dark enough against the white, and a filled button must contrast with the page behind it unless the label alone makes the button obvious.
Quick tip: use the checker with the border color as the text color and the surface as the background, and aim for 3:1 or more.
Color contrast and color blindness
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, most often red-green. People with these conditions see color differences less clearly, but they see lightness well. That is why contrast based on lightness is the most inclusive tool you have. A red button with white text may look fine to you but a deuteranope sees a dark olive. Always pair color with a second cue such as an icon, label, pattern or underline.
The Color blind preview tab applies the Machado et al. (2009) simulation matrices to your pair, in linear light, and recalculates the contrast. If the ratio holds up in every row, the pair relies on lightness and is safe. If a row collapses below 3:1, change the lightness.
Contrast in design systems and dark mode
Build contrast into your design tokens. Pick a neutral scale where each step has a documented ratio against your page background, mark which steps are safe for body text, and test every brand color with both light and dark surfaces. Dark mode is not just an inversion: a color that passes on white may fail on charcoal. Test both themes, and check hover, focus, active, visited and disabled states, which are easy to forget.
Paste your tokens into the Palette grid and export the results as CSV to include in a design review or an accessibility statement.
Limits of automated contrast checking
A contrast calculator measures two flat colors. It cannot judge text over photographs, gradients or video, semi-transparent layers, anti-aliasing on thin fonts, text that changes with hover, or very small text. Screen brightness, ambient light and personal vision all matter. Treat a pass as a strong start and test the real page, including on a phone outdoors.
Privacy
Color values are processed locally in your browser. They are not uploaded, saved or shared. Exports are created on your device.
Related free tools
Use these free online tools together with this one:
- See how colors look to people with color vision deficiency with the color blind test.
- Run a wider accessibility check on your page with the HTML accessibility checker.
- Work through the full set of WCAG requirements with the WCAG checklist generator.
- Fix a failing color by making lighter and darker versions with the tints and shades generator.
- Make a preview card for your page with the Open Graph generator.
- Shrink page images so the page loads faster with the image compressor.
Frequently asked questions
What is color contrast and why does it matter?
Color contrast is the difference in brightness between text (or an icon) and its background. Low contrast makes content hard to read for people with low vision, color vision deficiency, ageing eyes, glare on a phone screen or a poor display. Good contrast helps everyone, and in many countries it is part of accessibility law.
What contrast ratio do I need to pass WCAG AA?
WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text, as well as 3:1 for user interface components and meaningful graphics (success criteria 1.4.3 and 1.4.11).
What contrast ratio do I need for AAA?
Level AAA (success criterion 1.4.6) asks for 7:1 for normal text and 4.5:1 for large text. AAA is not required for most sites but is a great target for body text.
What counts as large text in WCAG?
Large text is at least 18 point (24 CSS pixels) regular weight, or at least 14 point (about 18.66 CSS pixels) bold. Enter your size and weight in the tool and it applies the right threshold for you.
How is the WCAG contrast ratio calculated?
Each color is converted to relative luminance using the sRGB formula, then the ratio is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color. The range is 1:1 (identical) to 21:1 (black on white).
Does the checker round up 4.49 to 4.5?
No. WCAG does not allow rounding up, so a real ratio of 4.499 fails. The tool truncates the displayed ratio to two decimals and compares the exact value.
What is APCA and is it part of WCAG?
APCA, the Advanced Perceptual Contrast Algorithm, is a newer method being developed for WCAG 3. It returns a lightness contrast value Lc that depends on polarity (dark text on light, or the reverse), and gives different guidance for font size and weight. It is not part of WCAG 2.2, so legal requirements still use the WCAG 2 ratio. The tool shows both.
What is a good APCA Lc score?
Roughly Lc 90 or more for body text and any size, Lc 75 for body text at about 18 px regular, Lc 60 for larger content text, Lc 45 for large headlines and Lc 30 as an absolute minimum for non-essential text. Guidance may change as the draft develops.
Do placeholders, disabled buttons and logos need contrast?
Placeholder text should meet the normal text ratio because it conveys information. Disabled controls and logos or brand names are exempt from the WCAG contrast rules, though very faint disabled states are still hard to use.
Do icons, borders and focus rings need contrast?
Yes. Success criterion 1.4.11 asks for 3:1 against adjacent colors for icons and graphics needed to understand content, form field borders and the visual state of controls, including focus indicators.
How do I fix a color that fails?
Change the lightness. The tool searches for the nearest shade that keeps the same hue and saturation and reaches the target, either by changing the text color or the background. Darkening grey text from #999999 to #767676 on white is the classic fix.
Can I test text on images or gradients?
Check the worst point: pick the lightest part behind dark text, or the darkest part behind light text. Adding a solid or semi-transparent overlay behind text is the most reliable fix.
Does dark mode need the same contrast?
Yes. The same ratios apply to dark themes. Avoid pure white on pure black for long text if it causes glare, but keep the ratio high; grey on dark grey often fails.
How does color blindness affect contrast?
Color blind users depend mostly on lightness differences. Red and green with the same brightness can look identical. Use the Color blind preview tab to see the ratio under protanopia, deuteranopia, tritanopia and achromatopsia.
Which color formats can I enter?
Hex codes (#fff or #1a1a1a), rgb() and hsl() values and CSS color names such as rebeccapurple all work, as does the color picker.
Is my data sent anywhere?
No. All calculations run in your browser and nothing is uploaded or stored.
What can I print or export?
Print / save as PDF, CSV and Copy summary work on the tab you are viewing. The Check tab also has a Copy CSS button for the colors you chose.
Sources and further reading
- W3C Web Content Accessibility Guidelines (WCAG) 2.2: success criteria 1.4.1, 1.4.3, 1.4.6, 1.4.11 and the definitions of relative luminance and contrast ratio.
- W3C Understanding Success Criterion 1.4.3 and 1.4.11, for large text sizes and non-text contrast.
- Myndex, APCA (Accessible Perceptual Contrast Algorithm) 0.0.98G constants and WCAG 3 contrast draft, for the Lc method.
- Machado, Oliveira and Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency, IEEE Transactions on Visualization and Computer Graphics.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.