Your two colours
Text colour (foreground)
Background colour
The last three boxes in each column use OKLCH, a way of describing a colour by its lightness, its chroma (how strong the colour is) and its hue (where it sits on the colour wheel). The maths is the one Cascading Style Sheets Color Level 4 uses. If an OKLCH colour is outside sRGB, the range of colours most screens show, it is cut back into that range channel by channel, which is not what Cascading Style Sheets does. The contrast is always worked out on the final 8-bit sRGB pair.
Try a sample pair
Web Content Accessibility Guidelines 2.2 result
The brightness of each colour shows here.
Preview
Normal text, 16px (about 12pt). The quick brown fox jumps over the lazy dog. Body text, captions and most labels need 4.5:1 for AA.
Large text, 24px (18pt) bold
Control or icon · needs 3:1Nearest colour that passes
This changes only the lightness (the HSL lightness value), so the hue and saturation stay as they are, until the pair reaches the target. Pass or Fail uses the exact ratio of the real 8-bit colour, not the rounded number on screen.
Share link
How the contrast ratio is worked out
This checker uses the Web Content Accessibility Guidelines 2 formulas for relative luminance (how bright a colour is, from 0 for black to 1 for white) and for contrast. The formulas are the same in Web Content Accessibility Guidelines 2.0, 2.1 and 2.2. It does not work out Accessible Perceptual Contrast Algorithm values.
- Scale each channel to 0–1. A channel is the red, green or blue part of a colour.
R_sRGB = R_8bit ÷ 255, and the same for green and blue. - Make each channel linear. If
R_sRGB ≤ 0.04045, thenR = R_sRGB ÷ 12.92. OtherwiseR = ((R_sRGB + 0.055) ÷ 1.055) ^ 2.4. - Add the channels into one brightness number. Relative luminance is
Y = 0.2126R + 0.7152G + 0.0722B. - Compare the two colours. The contrast ratio is
(L1 + 0.05) / (L2 + 0.05), whereL1is the brightness of the lighter colour andL2the darker one. The page shows two decimal places, and Pass or Fail uses the exact number before rounding.
#777777 on white is about 4.48:1, which fails AA for normal text (4.5:1). #767676 on white is about 4.54:1, which passes AA for normal text.
The numbers each result is tested against (SC means success criterion, one numbered rule in Web Content Accessibility Guidelines):
- Normal text: AA needs 4.5:1 and AAA needs 7:1 (SC 1.4.3 and 1.4.6). Body text, captions and most labels are normal text.
- Large text: AA needs 3:1 and AAA needs 4.5:1. Large means at least 18 point (typically 24px at 96dpi) or at least 14 point bold (typically 18.67px bold).
- Controls and graphics: buttons, icons and other graphics that carry meaning need 3:1 against the colours next to them (SC 1.4.11, Non-text Contrast). Disabled controls are exempt. Text inside a button is still text, so it follows the text numbers.
Accessible Perceptual Contrast Algorithm is not included. Accessible Perceptual Contrast Algorithm is a different way of measuring contrast, discussed for Web Content Accessibility Guidelines 3. It is not a Web Content Accessibility Guidelines 2 success criterion. This page never shows an Accessible Perceptual Contrast Algorithm value, so a Web Content Accessibility Guidelines 2 check cannot be mistaken for an early Web Content Accessibility Guidelines 3 estimate.
If the nearest passing colour cannot be found by changing only one side, for example when the fixed colour is a mid grey and the target is AAA at 7:1, the suggestion box says so and does not change the hue.
Questions and answers
Who made this?
UtilForge makes it. UtilForge is a website of free cybersecurity tools and small calculators. The About page explains why the tools were made, and the Contact page is the way to reach us.
Is this a scam site?
A person does not have to take UtilForge's word for it, so here are things to check. This page does not ask for payment, an account or card details. The checker itself is free. UtilForge also sells optional packs of tools separately, on Gumroad, and this checker works without them. The page carries a security setting (a Content Security Policy, a rule the browser enforces) that forbids the page from sending anything out, so the colours you type stay on your device. To test it, open the page, switch the internet off, and keep using it. It carries on working, because everything is calculated on your own device.
What happens when I close the page?
The page stores nothing on your device: it does not use cookies, local storage, session storage or IndexedDB (the browser's built-in database). The one place the colours are kept is the page address. Each time a colour changes, the page adds the two colours to the end of the address, after a # sign, for example #fg=777777&bg=ffffff. Closing the tab removes the page and its colours. If you copied the link, bookmarked the page or sent the link to someone, that link still holds the two colours, and anyone who has it can see them. Nothing else is in the link. The page downloads no files. The Copy button puts the link on your clipboard. Opening the page again without a link starts from the sample colours, grey #777777 on white.
Does it cost anything, and do I need to sign in?
No. The checker is free, and you can start straight away. UtilForge also sells optional packs separately, but this checker does not need one.
What contrast ratio does text need to pass Web Content Accessibility Guidelines?
For normal text, AA needs a ratio of at least 4.5:1 and AAA needs at least 7:1 (Web Content Accessibility Guidelines 2.2 success criteria 1.4.3 and 1.4.6). Large text, which means at least 18 point or at least 14 point bold, needs 3:1 for AA and 4.5:1 for AAA. Buttons, icons and graphics that carry meaning need 3:1 against the colours next to them (success criterion 1.4.11). Text inside a button still counts as text, so it follows the text numbers. The five results on this page show each of these tests as Pass or Fail.
Can I send someone the two colours I checked?
Yes. The Share link box holds the page address followed by # and the two colours, for example #fg=777777&bg=ffffff. Here fg is the text colour (foreground), bg is the background, and each is a six-character hex code without the # sign. The address bar updates whenever a colour changes, and the Copy button copies the same link to your clipboard. Anyone who opens the link sees the same two colours, and their own device works out the results again. If a link holds only one of the two colours, the other stays at the sample value (grey #777777 text, white background). Links in the older form of six characters, a dash and six more, such as #767676-ffffff, also open. A link that holds nothing the page can read leaves the colours as they were.
What is the difference between AA and AAA?
AAA asks for a higher contrast ratio than AA. Many teams aim for AA on body text and go to AAA where they can. Advice from the accessibility community is to keep checking focus outlines and page structure too, and not to chase AAA badges while skipping them.
Do the rules for large text differ from normal text?
Yes. Web Content Accessibility Guidelines sets different numbers for large text, for normal text and for controls and graphics. This page shows a Pass or Fail for each case.
Can it suggest a nearby colour that passes?
Yes. When a pair is close but not quite there, use the box called Nearest colour that passes.
Does a pass mean my whole design is accessible?
No. Contrast is one check. Keyboard use, labels and page structure matter as well.