TRUTHY TOOLS

Color Contrast Checker

Check contrast ratio and WCAG readability for text and background colors.

Readable Text
Result
Detecting...
Normal Text
Detecting
Large Text
Detecting
Contrast Ratio
Detecting...
AAA Normal
Detecting
AAA Large
Detecting
WCAG AA requires 4.50:1 for normal text and 3.00:1 for large text.
AAA requires 7.00:1 for normal text and 4.50:1 for large text.
Random generates color pairs that pass all 4 checks.

About this tool

Color Contrast helps designers, front-end developers, accessibility reviewers, and brand teams check text and background color contrast against WCAG readability expectations. Use it for CSS color pairs, design tokens, brand palette QA, button states, chart labels, and accessibility bug reports.

Use cases

  • Test a foreground and background color before shipping body text, links, buttons, badges, form errors, or disabled UI states.
  • Compare brand palette combinations during design-system work and copy the ratio into a token review or accessibility ticket.
  • Check hover, focus, selected, and dark-mode color pairs so QA can reproduce the same contrast result in a bug report.
  • Validate chart labels, table text, and status colors that may look acceptable visually but fail small-text readability requirements.

FAQ

What is Color Contrast best used for?

Color Contrast is best used to compare two colors, calculate their contrast ratio, and judge whether the pair is readable for common text and UI scenarios.

What input and output should I expect?

Provide foreground and background colors, usually as HEX, RGB, or supported CSS-style values. The output includes a contrast ratio and pass/fail-style readability guidance.

What standards and edge cases matter?

Contrast guidance is commonly tied to WCAG text criteria, but font size, weight, transparency, gradients, images, anti-aliasing, and user settings can affect real readability.

Does a passing ratio guarantee the whole component is accessible?

No. Contrast is one accessibility check. Also review focus states, semantics, keyboard behavior, target size, motion, and whether color alone communicates meaning.