About the Contrast Ratio Calculator
Text that is hard to read is text that does not get read. Low contrast between text and its background is one of the most common accessibility problems on the web, affecting people with low vision, colour blindness and ageing eyes — and everyone reading a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG), the international standard for accessible websites, set minimum contrast ratios for text and interface elements.
This contrast ratio calculator checks the contrast ratio between a text colour and a background colour, and whether it passes WCAG AA and AAA for normal text, large text and interface components such as buttons and icons. It also shows each colour's relative luminance.
How to Use the Contrast Ratio Calculator
Enter the text colour and the background colour as HEX (#767676), RGB (rgb(118, 118, 118)) or HSL (hsl(0, 0%, 46%)).
The order does not matter: the ratio is the same either way.
How the Contrast Ratio Is Worked Out
each channel: c = value ÷ 255
linear = c ÷ 12.92 if c ≤ 0.04045
= ((c + 0.055) ÷ 1.055)^2.4 otherwise
luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B
contrast ratio = (lighter L + 0.05) ÷ (darker L + 0.05)The ratio runs from 1:1, for two identical colours, to 21:1, for black on white.
Step-by-Step Example
#767676 grey text on a white background.
Grey luminance: 0.1812
White luminance: 1.0000
Ratio: (1 + 0.05) ÷ (0.1812 + 0.05) = 4.54:1
Normal text: AA pass (4.5), AAA fail (7)One step lighter, #777777, gives 4.48:1 and fails AA for normal text.
WCAG Requirements
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Icons, buttons, form borders | 3:1 | – |
Large text means at least 18 point (24 CSS pixels) in regular weight, or 14 point (about 18.7 pixels) in bold. Decorative text, logos and disabled controls are exempt.
Level AA is the standard most organisations aim for and the level referred to by many accessibility laws and procurement rules. Level AAA is stricter and recommended for text that people must read at length.
Why Luminance Is Not Just Brightness
The eye is much more sensitive to green light than to red, and least sensitive to blue. That is why the formula weights green by 0.7152 and blue by only 0.0722, and why pure blue (#0000FF) on black has very low contrast even though it looks vivid. The linearisation step reverses the gamma curve used to store colours, so the calculation reflects the actual light the screen emits.
Common Problems and Fixes
Light grey text is the most common failure. On white, #767676 is the lightest grey that passes AA for normal text, and about #595959 is needed for AAA.
White text on bright colours such as orange, yellow, light green and medium blue often fails. Dodger blue with white text is only about 3.24:1; black text on it gives 6.49:1. Darken the background or switch to dark text.
Text over images needs a solid or semi-transparent background panel, or a dark overlay, to guarantee contrast wherever the text falls.
Hint text inside empty form fields is often too pale; it needs to meet the same ratio if it carries information.
Beyond Contrast
Good contrast is necessary but not sufficient. Do not rely on colour alone to show meaning — pair red error text with an icon or message, and underline links in body text. Use readable font sizes, and let users zoom without breaking the layout.
Contrast in Dark Mode
Dark themes need the same contrast checks. Pure white text on pure black gives the maximum 21:1, but many designers soften both to reduce glare, such as light grey text on a dark grey background. Check the softened pair still passes: #E0E0E0 on #121212, for example, gives a ratio of about 14.2:1, comfortably above AAA. Muted secondary text in dark themes is where failures usually appear.
Testing Your Whole Design
Check every pairing of text and background in a design, not just the main body text: links, buttons in each state, error messages, captions, table stripes and text on coloured banners. Browser developer tools and design software can flag low-contrast text automatically, and this calculator lets you test any individual pair quickly.
Contrast for Graphics and Charts
WCAG also asks for 3:1 contrast for graphical objects needed to understand content, such as chart lines, icons without text, and the borders of input fields. Bars in a chart should contrast with the background and, ideally, with each other; adding labels or patterns helps readers who cannot tell similar colours apart. The same ratio formula applies, so any two colours can be checked here, including neighbouring chart colours, a line against its background, or an icon against the button it sits on, before the design is built and handed over to developers.
Understanding Your Result
Contrast ratio gives the ratio between the two colours.
Normal text shows whether it passes AA and AAA for normal text.
Large text shows whether it passes AA and AAA for large text.
Interface parts shows whether it meets 3:1 for icons and controls.
Luminance gives each colour's relative luminance.
Worth knowing defines large text.
When Should You Use This Calculator?
Designing a website or app.
Choosing brand colours for text and buttons.
Auditing accessibility.
Checking text over coloured banners.
Designing presentations and documents.
Common Mistakes
Using light grey text on white.
Putting white text on bright colours.
Forgetting hover and focus states.
Relying on colour alone to convey meaning.
Testing only the main text colour.