How to use the color contrast checker
Use this page when you know the solid text and background colors that will touch in a design. It checks text contrast only; it does not inspect a whole page.
- Enter the foreground text color as a 3- or 6-digit HEX value.
- Enter the solid background color behind that text.
- Select Check contrast to confirm the pair.
- Read the ratio and each written Pass or Fail result.
- Review the confirmed sample, then test every other color pair used in the real interface.
How the WCAG contrast ratio is calculated
Each 8-bit sRGB channel is divided by 255. Values at or below 0.04045 are divided by 12.92; higher values use ((channel + 0.055) / 1.055)²·⁴. Relative luminance is 0.2126R + 0.7152G + 0.0722B. The final ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker one. The possible range is 1:1 to 21:1.
AA and AAA thresholds for text
WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires at least 7:1 for normal text and 4.5:1 for large text. Large-scale text means at least 18pt in regular weight or at least 14pt in bold, with an equivalent size used for CJK text. In CSS terms, 18pt is about 24px and 14pt is about 18.5px. Very thin or unusual typefaces can still be hard to read.
Why the displayed number and decision can look different
Thresholds are applied to the full internal ratio, not the two-decimal display. A true ratio of 4.499:1 fails the 4.5:1 requirement even if a rounded label would appear as 4.50:1. This checker therefore keeps full calculation precision for every decision and separately rounds only the ratio shown on screen and copied to the clipboard.
What this checker covers
- It accepts opaque 3- or 6-digit sRGB HEX colors only.
- It compares one foreground color with one solid background color.
- It does not composite alpha, sample gradients or images, recommend replacement colors, or scan a website.
- A passing pair does not by itself make a page or product WCAG conformant. Other text sizes, states, graphics, controls, focus indicators, zoom, semantics, and interactions still need review.
Practical checking tips
Use the colors actually specified where the text and background meet. Check links, hover and focus states, disabled controls, validation messages, text over images, and theme variants separately. If antialiasing makes thin letters appear lighter, do not rely on the preview alone; the formula evaluates the specified colors, while readability also depends on the font and rendering conditions.
Worked examples
Black #000000 on white #FFFFFF has the maximum ratio, 21.00:1, and passes all four text thresholds.
Gray #767676 on white has an internal ratio of about 4.5422:1, so it passes normal AA. Gray #777777 is about 4.4781:1 and fails normal AA even though both display close to 4.5.
Frequently asked questions
Can I enter HEX without the # sign?
Yes. Three or six hexadecimal digits are accepted with or without #, then normalized for the result.
Why are transparency and gradients rejected?
Their effective background depends on compositing or position. This focused checker accepts only one opaque foreground and one opaque background.
Does a Pass mean my entire website meets WCAG?
No. It confirms only the selected text color pair against the listed numeric thresholds.
Which result should I use for 16px body text?
Treat ordinary 16px body text as normal text, so use at least 4.5:1 for AA or 7:1 for AAA.
Can large bold text use 3:1?
For Level AA, yes when it meets the large-scale definition: at least 14pt bold, or at least 18pt when not bold.