Contrast Checker
Pick a text colour and a background colour and instantly see the WCAG contrast ratio, with clear AA and AAA pass/fail for normal text, large text and UI components. Sample colours with the eyedropper and read it live on a real text preview.
A good contrast ratio is 4.5:1 for normal text and 3:1 for large text to meet WCAG AA; 7:1 and 4.5:1 meet AAA. Pick your two colours below — the checker grades every level live and shows them in real paint.
Adjusting: Text colour
Large heading text
Normal body text — the quick brown fox jumps over the lazy dog and reads it clearly.
Small print at 13px — fine details, captions and footnotes.
Contrast is measured as a ratio from 1:1 (no contrast) to 21:1 (black on white). The minimum you need depends on the text size and the conformance level you're targeting — AA is the legal baseline most teams use, AAA is the enhanced standard.
| Content | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 18.66px bold / 24px) | 4.5:1 | 7:1 |
| Large text (18.66px bold or 24px+) | 3:1 | 4.5:1 |
| UI components, icons & graphics | 3:1 | 3:1 |
Our color tools run on our own catalogue of 26,000+ real paint colors across 16 brands — Benjamin Moore, Sherwin-Williams, Behr, Dulux, RAL and more — with the color math (HSL and CIELAB matching) computed in-house, not scraped from summaries. Every color you pick maps to a real, buyable paint with its code, so what you see here you can actually take to the store. We review and update these tools and their data regularly.
Created by Denis Kataev, founder of DSGN.HOUSE — a software engineer and digital entrepreneur building professional color-design tools for everyone.
What is a contrast checker?+
A contrast checker measures how readable one colour is against another. Pick a foreground (text) and background colour above and it returns the WCAG contrast ratio plus whether it passes AA and AAA for normal text, large text and UI elements.
How is the contrast ratio calculated?+
It compares the relative luminance of the two colours using the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. Ratios run from 1:1 (identical) to 21:1 (pure black on white).
Does it show the colours as real paint?+
Yes — under the result it shows the nearest real, buyable paint across 16 brands for both your text and background colour, with codes, so a contrast-checked palette maps straight to physical paint.
What is a good colour contrast ratio?+
WCAG sets minimums by use: normal text needs at least 4.5:1 (AA) or 7:1 (AAA); large text (18.66px bold or 24px) needs 3:1 (AA) or 4.5:1 (AAA); icons, borders and UI components need 3:1. The checker grades each of these for you as you pick.
What's the difference between AA and AAA?+
AA is the standard most sites aim for and the level most accessibility laws (ADA, Section 508, EN 301 549) reference. AAA is the enhanced level for the highest readability. The checker shows both for normal and large text.