Giga Useful ToolsColor
WCAG contrast
Check whether a pair of colors passes AA and AAA.
Everything runs in your browser. No file is ever uploaded to a server.
- 1Pick or type the hex code for your text color.
- 2Pick or type the hex code for your background color.
- 3Check the sample preview and the contrast ratio, then look at the four badges to see which WCAG levels it passes.
What's the difference between AA and AAA?+
They're two conformance levels in the WCAG accessibility guidelines. AA is the level most legal and organizational requirements reference: normal text needs a contrast ratio of at least 4.5:1 (3:1 for large text). AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text, and is recommended where possible but not always required.
What counts as “large text” under WCAG?+
Text at 18pt (24px) or larger, or 14pt (about 18.5px) and larger if it's bold. Large text gets a slightly lower contrast requirement because bigger, heavier strokes stay legible at lower contrast than small body text does.
Can I type in hex codes instead of using the color pickers?+
Yes, each color has both a picker and a text field next to it, so you can paste an exact hex value like #1a1a1f directly instead of clicking around a color wheel.