WCAG · text on background
Accessible color finder
Pick a background color and see preset foreground HEX values that meet WCAG AA contrast (4.5:1) for normal text, sorted by ratio. A fast alternative to guessing white vs off-white on tinted cards.
Foreground candidates with contrast ratio ≥ 4.5:1 (AA normal text)
Why this tool exists
Designers often try #FFFFFF and #000000 only. Many accessible grays and brand hues also pass — this surfaces candidates without a spreadsheet.
How to use it
- Set your background with the color input.
- Review suggested foreground colors and contrast ratios.
- Copy a passing HEX for body or link text.
- Confirm large text and UI components in the full contrast checker.
Use a different tool when…
You need exact brand-mandated text colors regardless of ratio — legal brand rules override math.
Practical tips
- AA at 4.5:1 is for normal text; large text can use 3:1.
- Links need distinguishability beyond contrast — add underlines.
- Dark mode may need different candidates — rerun on #121212 surfaces.
FAQ
Why only AA and not AAA listed?
We filter at 4.5:1 minimum. Many results also pass AAA — verify in the contrast checker.
Can I enter my brand text color?
Use the contrast checker for arbitrary pairs.
Does this check non-text UI?
Focus is text contrast. UI boundaries need 3:1 against adjacent colors per WCAG 2.x guidance.
Why a fixed candidate list?
Keeps the page fast and predictable. Expand manually in the contrast tool.
Transparent backgrounds?
Pick the flat color users actually see after compositing on your canvas.