About the Colour Contrast Checker
This colour contrast checker measures the WCAG ratio between a text colour and its background and tells you which conformance levels the pairing passes. It reports five results at once: AA and AAA for normal text, AA and AAA for large text, and the separate 3:1 threshold that applies to interface components such as input borders, icons and focus rings. A live preview renders your own sample text at an adjustable size on the actual background, because a ratio close to the line is best judged with your eyes as well as with a number.
How to use the Colour Contrast Checker
- 1
Set the Text colour and the Background colour using the two colour fields.
- 2
Read the contrast ratio at the top, expressed against 1.
- 3
Check the WCAG results panel for AA and AAA at normal and large sizes, and the UI components row.
- 4
Edit the Sample text and drag the Preview text size slider to judge the pairing at the size you will actually use.
What people use it for
Validating a brand colour for body text
Mid-tone brand colours very often land between 3:1 and 4.5:1 on white, which passes for large headings and fails for paragraphs — a distinction worth catching before launch.
Checking placeholder and helper text
Light grey secondary text is the most common contrast failure in real interfaces, because it is chosen for visual quietness rather than measured.
Testing focus rings and input borders
The UI components row applies the 3:1 requirement for non-text elements, which covers focus indicators, checkbox outlines and chart keys.
Auditing a dark theme
A palette that passes comfortably on white regularly fails when inverted, so every text and surface pairing needs checking again in the dark variant.
The WCAG contrast formula
The ratio is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker. Relative luminance itself comes from linearising each sRGB channel — dividing by 12.92 when the channel is at or below 0.03928, otherwise applying ((c + 0.055) / 1.055) to the power of 2.4 — then weighting the results 0.2126 for red, 0.7152 for green and 0.0722 for blue. The 0.05 added to both terms models ambient light reflecting off a screen, which stops the ratio running to infinity when one colour is pure black. The scale therefore runs from 1:1 for two identical colours to 21:1 for black on white, and nothing can exceed 21. Two consequences follow. The order of the colours does not matter, since the formula always divides the lighter by the darker. And because the green weighting dominates, changing the green channel moves the ratio far more than an equal change to blue.
The thresholds and what counts as large text
WCAG 2.1 success criterion 1.4.3 sets level AA at 4.5:1 for normal text and 3:1 for large text. Criterion 1.4.6 raises level AAA to 7:1 and 4.5:1 respectively. Large text is defined as at least 18 point, which is 24 CSS pixels, or 14 point bold, which is 18.66 pixels — the concession exists because thicker strokes cover more pixels and stay legible at a lower ratio. Criterion 1.4.11, added in WCAG 2.1, extends a 3:1 minimum to non-text content: the visual boundaries of user interface components, their states, and any graphical object needed to understand the content, which brings icons, input borders, focus indicators and chart series into scope. Several things are explicitly exempt: disabled controls, purely decorative graphics, logos as used in a brand's own trade mark, and text within a photograph that is incidental. The ratios are minimums for conformance, not targets — pushing body text well past 4.5:1 helps every user in bright sunlight or on a poor display.
The formula's known weaknesses and APCA
The WCAG 2 ratio is a blunt instrument. It ignores font size and weight beyond the single large-text cut-off, though a hairline weight at 12 pixels and a black weight at 60 pixels clearly do not need the same ratio. It ignores polarity, so it gives the same answer for dark-on-light and light-on-dark despite those being perceptually different, and it systematically overstates the readability of very dark pairings — many colour combinations that comfortably pass 4.5:1 on a dark background are noticeably harder to read than the number implies. The Accessible Perceptual Contrast Algorithm, or APCA, was developed for WCAG 3 to address this. It produces a signed lightness contrast value rather than a ratio, factors in font size and weight through a lookup table, and treats the two polarities separately. WCAG 3 remains a working draft with no fixed timeline, so 4.5:1 and 3:1 stay the numbers that regulators, procurement processes and legal requirements use today.
Tips
- Aim above the minimum rather than exactly at it — 4.5:1 is a floor, not a design target.
- Test every state, since hover, visited and disabled variants each have their own contrast and are usually forgotten.
- Contrast is only one axis: never use colour alone to convey meaning, and always pair it with text, an icon or a pattern.