WCAG contrast ratio calculator from HEX colors — how do I check text vs background for AA and AAA accessibility?
Use relative luminance in sRGB, then contrast = (Llighter + 0.05) / (Ldarker + 0.05). Our Color Picker shows ratio and badges: Fail, AA Large, AA, AAA. Pick the text color, set a comparison swatch (preset or custom HEX), and read the ratio instantly.
Detailed answer
WCAG 2.1 uses the same luminance definition for normal text (AA 4.5:1, AAA 7:1) and large text (AA 3:1). Eyedropper support lets you sample UI pixels. For strict audits, verify with official docs; this tool is ideal for quick design iteration.
Relationship context
Accessibility is about perceptual contrast on real devices; calculators assume sRGB-encoded values as entered.
Example sRGB codes (HEX · RGB · HSL)
More Color Picker tools
Open the main picker or a fixed input/output converter—same math as the hub, with copy-ready strings.