Color Contrast Ratio Calculator
Check WCAG contrast between two hex colors for accessibility.
Foreground hex code, with or without #.
Background hex code, with or without #.
Results update as you type.
How it works
A color contrast ratio calculator measures how readable text is against its background by comparing two colours using the WCAG accessibility standard. It returns the contrast ratio, a number from 1:1 to 21:1, and tells you whether that ratio meets the Web Content Accessibility Guidelines Level AA threshold for normal text. Sufficient contrast is essential so that people with low vision or colour deficiencies, and anyone in bright sunlight, can read content comfortably. This check matters for designers, developers, and content creators building accessible, compliant interfaces. Accessibility law and platform guidelines in many regions reference WCAG, so failing contrast can be both an exclusion of real users and a legal risk. Beyond compliance, good contrast simply makes products easier to use for everyone. Testing a text-and-background pair before shipping catches problems that are easy to fix in design but costly to retrofit later. The calculation follows the WCAG formula precisely. Each colour is converted from its hex code to relative luminance by linearising the red, green, and blue channels through the sRGB gamma curve and weighting them by how sensitive human vision is to each. The ratio divides the lighter luminance plus a small glare offset by the darker plus the same offset. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. Designers and developers use a contrast calculator to guarantee their colour choices are legible and accessible.
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)
Each colour's relative luminance is found by converting its sRGB channels to a linear scale (dividing by 255, then applying the sRGB gamma curve) and weighting them 0.2126 red, 0.7152 green, and 0.0722 blue, matching how the eye perceives brightness. The contrast ratio then divides the lighter luminance plus 0.05 by the darker plus 0.05. The 0.05 offset models ambient screen glare, and the ratio ranges from 1:1 for identical colours to 21:1 for black on white.
Source:WCAG 2.1 relative luminance (W3C)
We review all our tools from time to time to ensure accuracy.
Worked example
How to use this calculator
- 1
Enter your values
Enter text color and background color.
- 2
Adjust the options
Fine-tune any options to match your situation.
- 3
Read your result
Contrast ratio updates instantly as you type — no button to press.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal-size text and 3:1 for large text, defined as 18 point or 14 point bold and above. The stricter Level AAA asks for 7:1 normal and 4.5:1 large. This calculator checks the AA normal-text threshold of 4.5:1. Meeting or exceeding these ratios ensures text remains legible for users with moderate vision loss.
How is the contrast ratio actually calculated?
Each colour is converted to a relative luminance value that reflects perceived brightness, by linearising its red, green, and blue channels and weighting green most heavily because the eye is most sensitive to it. The ratio then divides the lighter colour's luminance plus 0.05 by the darker's plus 0.05. That small offset accounts for screen glare. The result ranges from 1:1 for identical colours up to 21:1 for pure black on pure white.
Why does green count more than red and blue?
The luminance weights, 0.2126 for red, 0.7152 for green, and 0.0722 for blue, mirror the sensitivity of human vision. Our eyes perceive green light as much brighter than the same intensity of red or blue, so green contributes most to how bright a colour appears. Weighting the channels this way makes the contrast ratio match perceived readability rather than raw numeric colour values, which is what accessibility requires.
Does contrast apply to large text differently?
Yes. Because large text is easier to read, WCAG relaxes its contrast requirement to 3:1 at Level AA, compared with 4.5:1 for normal text. Large is defined as at least 18 point, or 14 point when bold. This calculator reports the AA normal-text result, so a pair that fails here at 4.5:1 might still pass for headings and large display text. Always test at the size the text will actually appear.
What if I enter an invalid hex code?
The calculator needs valid three- or six-digit hexadecimal colour codes, optionally prefixed with a hash, such as #1A2B3C or #abc. If either field contains characters outside 0 to 9 and A to F, or the wrong number of digits, the result cannot be computed and shows a dash. Correct the code to a proper hex value and the ratio and pass or fail verdict will appear immediately.