Color Contrast (WCAG) Checker

How it is calculated

Enter two hex colours, as 3 or 6 digits with or without the #. Each red, green and blue channel is divided by 255 and linearised: c / 12.92 when c is at most 0.03928, otherwise ((c + 0.055) / 1.055)^2.4. Relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (Llighter + 0.05) / (Ldarker + 0.05), so it does not matter which colour is the text.

The level shown is AAA at 7:1 or more, AA at 4.5:1 or more, and otherwise a fail. The 3:1 threshold for large text is not applied. An invalid code, such as a non-hex letter or a wrong digit count, returns an “Invalid color code” message instead of a ratio.

Common mistakes

• Judging by eye. #777777 on white gives 4.48:1 and fails, while #767676 gives 4.54:1 and passes, though the two greys look identical.
• Assuming a mid-tone brand blue is safe on white. #1a73e8 reaches only 4.51:1, barely over the AA line, and any lighter shade fails.
• Expecting large-text leniency. This tool applies 4.5:1 for AA to every pair, so a heading that qualifies at 3:1 under the standard will show as a fail here.
• Typing a colour name or an rgb() value. Only 3- or 6-digit hex codes are accepted, and anything else returns the invalid message.
• Forgetting that a 3-digit code doubles each digit: #f80 means #ff8800, not #0f0800.