How to choose accessible text colors

Start with your intended foreground and background colors, check their contrast ratio, then adjust the combination instead of relying on what looks readable on your own screen.

A practical workflow

1. Choose the actual text and background colors you plan to use.
2. Enter or sample both colors in a contrast checker.
3. Check the ratio against the WCAG level and text size you are targeting.
4. If it fails, adjust the foreground, background or both.
5. Recheck the final colors after design changes.

When working from screenshots

If you are recreating a palette from a screenshot, sample the colors first, then run the sampled values through a contrast check. That keeps “color inspiration” separate from “is this readable?”

Sample and check colors on Android