Why contrast matters
Text that doesn’t contrast enough with its background is hard to read for everyone and can make content unusable for people with low vision or certain types of colour blindness. Accessibility guidelines (like WCAG) set minimum contrast ratios for text and UI.
Contrast ratio is the relative luminance of the brighter colour divided by the darker (e.g. 4.5:1 for normal text at AA level). Higher is better; 7:1 or more is AAA for normal text.
WCAG levels (AA and AAA)
WCAG 2.x defines AA (minimum) and AAA (enhanced). For normal text, AA usually means at least 4.5:1 contrast; AAA means 7:1. Large text has lower requirements. Our contrast checker shows pass/fail for AA and AAA so you can adjust colours until they meet the level you need.
Colour isn’t the only requirement (e.g. focus states, not relying on colour alone), but contrast is a big part of making text readable.
Colour formats
Colours are often specified as hex (#RRGGBB), RGB, or HSL. Design tools and code use different formats. Our colour converter lets you enter a value in one format and see the others—useful when copying between tools or matching a brand colour.
Tools to use
Use the Contrast Checker to test foreground/background pairs for AA/AAA. Use the Color Converter to switch between hex, RGB, HSL, and other formats. Both run in the browser.