Loading page
About this tool
Check WCAG contrast ratio for text and background colors.
The Color Contrast Checker measures the contrast ratio between a text colour and a background colour using the WCAG 2 relative luminance formula, then shows whether the pair passes AA normal (4.5:1), AA large (3:1) and AAA normal (7:1). Pick or paste two hex values and you get the exact ratio, a live preview of real heading and body text in those colours, and a copyable CSS declaration. It is for designers and developers checking a palette before it becomes an accessibility bug report.
Open Color Contrast Checker on AltFTool — it loads instantly in your browser.
Set the 'Text color' and 'Background' rows in the left card — each has a swatch picker plus a hex box that takes a 3- or 6-digit hex with or without the #; they open on #111827 text over #ffffff.
The Preview panel repaints as you type, showing the heading 'Readable interface text' over your chosen background, and the Ratio card prints the value to two decimals followed by :1 — it shows a dash until both hex values are valid.
Read the 'AA normal', 'AA large' and 'AAA normal' cards beside the ratio: each turns green and reads Pass at 4.5:1, 3:1 and 7:1 respectively, and red with Fail below that. 'Copy CSS' puts the color and background-color declarations on your clipboard and the button reads Copied for a second.
Channels are linearised with the 0.03928 threshold and weighted 0.2126 red, 0.7152 green, 0.0722 blue, then compared as (L1 + 0.05) / (L2 + 0.05).
AA normal, AA large and AAA normal are each judged pass or fail alongside the numeric ratio, so you can see exactly where a colour pair stops working.
Heading and paragraph text render in your chosen colours, so you can judge the reading experience as well as the score.
4.5:1 for normal body text at AA, 3:1 for large text at AA, and 7:1 for normal text at AAA. Large text means roughly 18pt, or 14pt when bold.
As (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter colour's relative luminance and L2 the darker one's. Each sRGB channel is divided by 255, linearised — divided by 12.92 below 0.03928, otherwise raised to the power 2.4 after the 0.055 offset — and weighted 0.2126, 0.7152 and 0.0722 for red, green and blue.
No. The calculation always divides the higher luminance by the lower, so swapping text and background gives the identical ratio. Ratios range from 1:1 for identical colours to 21:1 for pure black on pure white.
No — it settles text contrast only. WCAG also covers non-text contrast for icons and UI borders at 3:1, focus visibility, keyboard operation and much else, so treat a pass here as one item cleared rather than a full audit.