Contrast Ratio Calculator
Is that text actually readable?
Contrast Ratio Calculator
Check text and background colours against the WCAG 2.1 AA and AAA contrast thresholds.
Large heading text
Body copy at 14–16px is judged against the stricter AA threshold of 4.5:1.
WCAG large text means 18pt (24px) regular or 14pt (18.66px) bold. Use the large-text threshold only when the text really is that size.
17.74:1
Passes AAA for normal text.
AA — normal text
Requires 4.5:1
AA — large text
Requires 3:1
AAA — normal text
Requires 7:1
AAA — large text
Requires 4.5:1
Embed this calculator
Put this calculator on your own site with the snippet below. The frame contains the tool only, reports its own height, and carries a visible link back to the full page. Embedding is free; keep the attribution link as it is, and do not wrap the frame in a way that hides it.
Preparing the embed code for this page...
What This Calculator Does
The Contrast Ratio Calculator measures the luminance difference between text and background colours and checks the result against WCAG 2.1 thresholds for AA and AAA, at normal and large text sizes. The preview renders your actual colours so the number and the look agree.
How It Works
Each sRGB channel is linearised, then weighted by the eye’s sensitivity to red, green, and blue to give relative luminance. The ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05, which ranges from 1:1 to 21:1. The thresholds are 4.5:1 for AA body text and 7:1 for AAA.
Example
Black on white scores 21:1, the maximum possible. Red #ff0000 on white scores about 4:1, which fails AA for body text but passes the 3:1 large-text threshold. #111827 on white scores about 17.7:1 and passes everything comfortably.
Formula
Ratio = (L₁ + 0.05) / (L₂ + 0.05)L₁ is the lighter of the two relative luminances.
L = 0.2126R + 0.7152G + 0.0722BChannels are linearised before weighting, not used as raw sRGB values.
Reading the Results
Contrast ratio
A ratio from 1:1 (identical colours) to 21:1 (black on white). Higher is more legible, and the threshold depends on text size and weight.
Pass or fail rows
Each row applies one WCAG threshold. Large text means at least 24 px regular or 18.66 px bold, which is why the same pair can pass one row and fail another.
Sources and References
W3C — WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum)
4.5:1 for normal text, 3:1 for large text
The AA requirement that most accessibility audits test first.
W3C — WCAG 2.1 Success Criterion 1.4.6 Contrast (Enhanced)
7:1 for normal text, 4.5:1 for large text
The AAA requirement, often adopted for public-sector and health content.
References identify the method or data behind this calculator. Where a standard or tariff changes, the current edition applies, and the assumptions stated above take precedence over a remembered figure.
Frequently Asked Questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises that to 7:1 and 4.5:1. Aim for 4.5:1 as a baseline, and 7:1 where readability is critical.
What counts as large text?
At least 18 point (24 px) regular weight, or 14 point (about 18.66 px) bold. Below that, the stricter normal-text threshold applies even if the text looks prominent.
Why does black on white give 21:1 and not infinity?
The formula adds 0.05 to each luminance to avoid dividing by zero and to model ambient light. The maximum possible ratio is therefore (1 + 0.05) / (0 + 0.05) = 21.
Does passing WCAG mean the design is accessible?
No. Contrast is one requirement among many. Font size, spacing, focus indicators, alternative text, motion, and semantic markup all matter, and automated checks catch only part of the picture.