Color Contrast Checker
The quick brown fox jumps over the lazy dog.
Sample text at the size being tested.
4.83:1
The checker measures the contrast ratio between a text colour and a background and reports which WCAG thresholds it clears. The sample text renders in the actual colours at the size being tested, because a ratio of 4.6:1 tells you it passes while the sample tells you whether it is comfortable to read.
How it works
Contrast is computed from relative luminance, not from how different the colours look. Each channel is converted from sRGB to linear light, weighted (green counts for 71% of perceived brightness, red 21% and blue just 7%) and the two luminances are compared.
ratio = (L1 + 0.05) / (L2 + 0.05)
- L1
- the relative luminance of the lighter colour, from 0 for black to 1 for white
- L2
- the relative luminance of the darker colour
- 0.05
- a constant representing ambient screen flare, which stops the ratio running to infinity against pure black
- AA requires 4.5:1 for body text and 3:1 for large text. Large means 24px, or 19px when bold.
- AAA requires 7:1 for body text and 4.5:1 for large text.
- Interface components and meaningful graphics need 3:1 against what is next to them. That is WCAG 1.4.11, and it applies to input borders, focus rings and icon buttons.
- The ratio runs from 1:1 for identical colours to 21:1 for pure black on pure white.
Because blue contributes so little to luminance, a saturated blue on black can read as dark and still fail badly. That is the single most common surprise this tool produces.
Examples
Grey text that fails
Text
#6b7280
Background
#ffffff
Result
4.83:1. Passes AA body text, fails AAA
This mid-grey is the default muted colour in several popular frameworks. It scrapes past AA and is a common source of complaints about readability.
The extremes
Text
#000000
Background
#ffffff
Result
21:1
The maximum possible ratio. Nothing can exceed it, so any tool reporting a higher number is wrong.
Blue on black
Text
#0000ff
Background
#000000
Result
2.44:1, fails everything
Pure blue looks bright but carries only 7% of the luminance weighting, so it is barely distinguishable from black by the measure that matters.
Frequently asked questions
What counts as large text?
At least 24px, or 18.66px, usually written as 19px, when bold. Below that the 4.5:1 body-text threshold applies. The looser 3:1 allowance exists because thicker strokes stay legible at lower contrast, which is about stroke weight rather than font size alone.
Does passing AA mean my design is accessible?
It means this pair of colours meets one criterion. Contrast says nothing about font size, line length, focus visibility, keyboard operation or whether colour alone carries meaning. It is a necessary check, not a sufficient one.
Why does blue fail when it looks bright to me?
Because the formula weights green at 71%, red at 21% and blue at 7%, matching how human vision responds. Pure blue contributes almost nothing to luminance, so it scores far worse than it appears. Lighten it or add green to fix it.
What about text over an image or a gradient?
Test the worst case, the lightest point of the image under the text, against the text colour. Since the ratio changes across the image, a design that passes against the average can fail badly in one corner. A solid scrim behind the text is the usual fix.
Should I be using APCA instead?
APCA is the candidate algorithm for WCAG 3 and models contrast more accurately, particularly for dark modes and thin fonts. It is not yet a standard, and conformance requirements still reference the WCAG 2 ratio. Use this to conform; consult APCA when the ratio passes but the text still looks wrong.
What is the suggested colour based on?
It walks your text colour toward black on a light background, or toward white on a dark one, and stops at the first step that clears the threshold. That keeps the hue and changes only the lightness, so it is the smallest change that fixes the failure.