CSS Color Contrast Checker
Compare text and background colors, check WCAG AA and AAA results, preview the pair, and fix weak contrast instantly.
Check a color pair
Use HEX, RGB, HSL, or a CSS color name. Results update as you type.
Examples: #112A46, rgb(17 42 70), hsl(211 61% 17%), navy
Excellent contrast for normal text, large text, and interface elements.
Toolslight
Toolslight brings practical browser tools to your fingertips. Fast, private, and ready whenever you need them.
8.42:1 contrastAbout this CSS Color Contrast Checker
This tool calculates the contrast ratio between a foreground text color and a background color. It helps designers and developers choose combinations that remain readable for more people.
WCAG contrast levels
- AA normal text: at least 4.5:1.
- AAA normal text: at least 7:1.
- AA large text: at least 3:1.
- AAA large text: at least 4.5:1.
- Interface components: generally at least 3:1 against adjacent colors.
What counts as large text?
Large text generally means 18pt or larger, or 14pt and bold. Smaller body copy should meet the stricter normal-text thresholds.
How the ratio is calculated
Each color is converted to relative luminance. The lighter luminance and darker luminance are then compared to produce a ratio from 1:1 to 21:1.
Important accessibility note
Passing contrast is an important check, but it does not guarantee that an entire interface is accessible. Also avoid using color alone to communicate meaning.
Privacy
Every calculation runs locally in your browser. The colors you enter are not submitted, saved, or sent to Toolslight.