Contrast ratio is a numeric measure of the difference in relative luminance between two colors, usually a foreground such as text or an icon and the background behind it. In accessibility and design, it is the main objective test of whether content stays readable for people with low vision, color vision deficiencies or poor viewing conditions.
The value is expressed as a ratio from 1:1, where both colors are identical in luminance, to 21:1, which is pure black on pure white. Accessibility standards such as WCAG set minimum thresholds for this ratio, so contrast ratio turns a subjective impression of legibility into a pass or fail result that designers, developers and auditors can verify.
How the contrast ratio is calculated
The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker color. The 0.05 offset models ambient light reflected from the screen, which prevents division by zero and keeps very dark pairs from producing unrealistic ratios.
Relative luminance is derived from the sRGB values of a color. Each channel is first converted from its gamma-encoded value into linear light, and the three linear channels are then weighted by human sensitivity: roughly 0.2126 for red, 0.7152 for green and 0.0722 for blue. Green dominates because the eye is most sensitive to it, which is why a pure green and a pure blue of equal saturation look very different in brightness.
The table below shows how the calculation behaves for common color pairs on a white background.
| Foreground color | Hex value | Ratio on white | Typical verdict |
|---|---|---|---|
| Black | #000000 | 21:1 | Maximum possible contrast |
| Dark gray | #595959 | About 7:1 | Meets enhanced level for body text |
| Medium gray | #767676 | About 4.5:1 | Borderline minimum for body text |
| Light gray | #AAAAAA | About 2.3:1 | Fails for text and most graphics |
| Pure blue | #0000FF | About 8.6:1 | Readable despite saturated hue |
| Pure yellow | #FFFF00 | About 1.1:1 | Practically invisible |
Contrast ratio thresholds in WCAG
WCAG 2.x defines contrast requirements at two conformance levels and distinguishes normal text, large text and non-text elements. Large text means at least 18 point regular or 14 point bold, which corresponds to roughly 24 px and 18.67 px in CSS. Larger glyphs have thicker strokes, so they remain legible at lower contrast.
| Content type | Level AA minimum | Level AAA minimum | Success criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 and 1.4.6 |
| Large text | 3:1 | 4.5:1 | 1.4.3 and 1.4.6 |
| User interface components | 3:1 | Not defined | 1.4.11 |
| Meaningful graphics | 3:1 | Not defined | 1.4.11 |
| Logos and decorative text | No requirement | No requirement | Exempt |
| Disabled controls | No requirement | No requirement | Exempt |
The thresholds are hard limits, not targets to round up to. A ratio of 4.48:1 fails the 4.5:1 requirement, even though most people would not notice the difference. Teams that work close to the boundary therefore tend to pick colors with a small safety margin so that rendering differences do not push them below the line.
Contrast ratio compared with related measures
Contrast ratio is not the only way to describe how distinct two colors are, and confusing it with neighboring measures leads to wrong conclusions. The most relevant alternative is the Accessible Perceptual Contrast Algorithm (APCA), developed as a candidate for future WCAG versions, which accounts for polarity, font weight and size.
| Measure | What it captures | Main strength | Main limitation |
|---|---|---|---|
| WCAG contrast ratio | Luminance difference only | Simple and legally referenced | Ignores polarity and font weight |
| APCA lightness contrast | Perceptual lightness difference | Models dark mode and thin fonts better | Not yet a formal requirement |
| Color difference (Delta E) | Overall color distance | Useful for brand color matching | Says little about legibility |
| Hue difference | Distinction by color alone | Helps categorical charts | Fails for color-blind users |
The key point is that hue does not create contrast in the WCAG sense. Red text on a green background can look vivid yet have a ratio near 1:1, and for someone with a red-green deficiency it may disappear entirely. This is why accessibility guidance pairs contrast ratio with the separate rule that color must not be the only carrier of information.
Applying contrast ratio in design systems
In practice, contrast ratio is most effective when it is built into the color palette rather than checked screen by screen. Mature design systems define each color token with its tested ratio against the backgrounds it may appear on, so that any approved combination is accessible by construction.
| Situation | Recommended approach | Reason |
|---|---|---|
| Body text on light surfaces | Aim for at least 7:1 | Comfortable reading over long sessions |
| Placeholder and helper text | Keep at least 4.5:1 | It is still text that users must read |
| Input borders and focus rings | Keep at least 3:1 against adjacent colors | Users must locate the control |
| Text over photographs | Add a solid or semi-opaque scrim | Image luminance varies across the area |
| Dark mode palettes | Test every pair again | Ratios do not mirror automatically |
| Brand color fails on white | Use a darker shade for text only | Keeps identity while restoring legibility |
Tools such as browser developer tools, design plugins and automated audit engines compute the ratio from the rendered colors. Automated scanners catch many failures but cannot judge text over gradients or images, so a manual review remains necessary for complex backgrounds.
Common mistakes and misconceptions
- Ignoring transparency: semi-transparent text must be measured after blending with the actual background, not by its nominal color.
- Testing only the default state: hover, focus, visited and error states each need their own check.
- Assuming more contrast is always better: very high contrast with pure black on pure white can cause glare for some readers, so near-black on off-white often reads better while still passing.
- Treating the ratio as a full legibility guarantee: thin font weights, small sizes and tight letter spacing can make passing text hard to read.
- Forgetting non-text elements: icons, chart lines and form borders fall under the 3:1 requirement for meaningful graphics.
Understanding it simply
Contrast ratio tells you how easy it is to tell text apart from the background it sits on. It compares how light one color is with how light the other is and turns the difference into a number, from 1:1 for no difference to 21:1 for black on white.
Think of reading a sign at dusk. Dark letters on a bright board stay readable, while gray letters on a slightly darker gray board fade away. A higher ratio means easier reading, and accessibility rules set a minimum, usually 4.5:1 for normal text, so that people with weaker eyesight can read the content too.
Applied in practice
A product team building an online banking dashboard uses a light gray #9E9E9E for secondary labels such as account numbers and transaction dates. An accessibility audit measures these labels at about 2.7:1 against the white background, well below the 4.5:1 minimum for normal text. Customers with low vision had already reported that dates were hard to read on mobile screens in sunlight.
The designers replace the token with #616161, which reaches about 6.2:1, and update the shared palette so that every component using secondary text inherits the change. They also raise the input border color to meet 3:1 for interface components. The visual hierarchy still works because size and weight now carry the distinction, and the follow-up audit reports no remaining contrast failures on the dashboard.