Pick a color
WCAG contrast checker
Checks the color you picked as text against a background.
Sample text Small text
-
AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI parts. AAA needs 7:1 and 4.5:1.
Free. Runs in your browser, nothing is uploaded.
Checks the color you picked as text against a background.
AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI parts. AAA needs 7:1 and 4.5:1.
Pick a color and copy it as HEX, RGB or HSL. Edit any format and the others follow. The contrast checker shows how that color reads on a background and whether it passes WCAG AA and AAA, so you can check brand colors, buttons and text before they go live.
Short HEX codes like #08c and codes with an alpha part are accepted; alpha is ignored.
Split the 6-digit HEX code into three pairs and read each as a base-16 number. #0a66c2 is 0a, 66, c2, which is rgb(10, 102, 194). Type a HEX code or move the RGB or HSL values and the other formats update.
The tool does it as you type. HSL stands for hue (0 to 360 degrees on the color wheel), saturation and lightness (both in percent). It is handy for making lighter or darker shades of one color.
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text and interface parts such as buttons and icons. AAA, the stricter level, asks for 7:1 for normal text and 4.5:1 for large text.
Text of 18 point (24px) or bigger, or 14 point (about 18.7px) bold or bigger.
It works out the relative luminance of the text color and the background using the WCAG formula, then divides the lighter by the darker, each plus 0.05. The result runs from 1:1 (no contrast) to 21:1 (black on white).
No. Everything runs in your browser.
Made by Irfan Muhammad, a digital marketer. Free to use.
Your input stays in your browser. Not affiliated with any government, LinkedIn or X.