Color Contrast Checker: Choose Accessible Text Colors
color contrast checker: Choose accessible text and background colors by checking contrast ratios and testing interface states beyond the default view.
Accessible color choices help more people read and use an interface, especially when text is small or displayed in poor lighting. The WCAG contrast formula compares relative luminance for foreground and background colors. Passing a ratio is useful, but color is only one part of accessible design. Check hover, focus, disabled, and error states, and do not use color as the only way to convey meaning. A contrast checker can screen combinations before a full design review.
Measure the right foreground and background
Enter the actual text color and the color directly behind it. The ratio ranges from 1:1 for identical colors to 21:1 for black on white. WCAG AA generally requires 4.5:1 for normal text and 3:1 for large text, with separate requirements for user-interface components and graphics. Transparency, images, and gradients can change the effective background, so sample the rendered color where the text appears.
Check every state and content size
A button label may pass in its default state but fail on hover or focus. Test links, placeholder text, form errors, charts, and icons that convey information. Large text uses a different threshold, but do not label text “large” unless it meets the defined size and weight criteria. A disabled control may have an exception in some criteria, but it should still remain understandable and usable.
Do not rely on color alone
Pair color changes with labels, icons, patterns, or text so users can distinguish states without color perception. Test the full page with keyboard focus, zoom, and assistive technology. A contrast checker cannot evaluate whether instructions are clear, focus is visible, or the color system works for every use. Treat the numeric ratio as one check in a broader accessibility review, and test the rendered design rather than only a palette swatch. Also confirm focus indicators and state colors remain distinguishable without color alone.
Worked example
Normal text on white: #555555 → #FFFFFF
Contrast ratio: approximately 7.46:1
Check separately: links, focus ring, button hover, error stateWhat contrast ratio does normal text need for WCAG AA?
The WCAG AA minimum is 4.5:1 for normal text. Large text has a 3:1 minimum; verify the applicable criterion and rendered colors.
Reference and further reading
KEEP EXPLORING
Another useful idea.
WCAG Color Contrast: AA and AAA Ratios Explained
Understand text contrast thresholds, relative luminance, large text rules, and how to test foreground/background pairs.
How to Build an Accessible UI Color Palette
Choose and test semantic color pairs for buttons, labels, focus indicators, and dark mode interfaces.
PX vs REM in CSS: Conversion and Practical Differences
Learn the px-to-rem formula, root font-size behavior, browser defaults, and common conversion mistakes.