Accessible Color Combinations for Readable UI
This page shows text and background color pairs with measured contrast ratios. Use them as practical starting points for body text, buttons, status messages, and light UI surfaces.
Measured Accessible Combinations
Each example below lists a foreground color, a background color, and the resulting contrast ratio so the guidance is specific instead of purely visual.
Body Text on Light Surface
Use deep neutrals for long-form text and reserve pale grays for boundaries, backgrounds, and card separation. This is a strong default for docs, settings, dashboards, and dense product content.
Primary CTA With White Text
White text can be effective on brand buttons, but only when the button shade is dark enough. The #1D4ED8 button color works for a primary CTA, while the darker #1E40AF hover shade reaches 8.72:1.
Success and Warning States
Status states should keep icon and text colors substantially darker than the tinted background. These pairings work for alert banners, inline validation, and settings feedback where the text still needs to read clearly at small sizes.
Accessibility Checklist
- Target a minimum contrast level that supports normal reading, not just large headlines.
- Check links, buttons, badges, placeholders, disabled states, and focus states separately.
- Do not rely on color alone to communicate status or meaning.
- Test the lightest and weakest state in the system first because that is where failures usually hide.
Common Accessibility Mistakes
Hover and disabled states
Designers often check the default button and forget the dimmed or hover versions. Those variants can easily slip below a usable contrast range.
Tinted cards with gray text
A soft green card with light gray text may look elegant in isolation but become difficult to read on laptops, in bright light, or for users with reduced contrast sensitivity.
Brand colors used as text colors
Brand colors often work as accents or fills, but not always as body text. Test them in context before treating them as typographic colors.
Marketing pages outside the app
Accessibility problems are often fixed in the product and then reintroduced on campaign pages, landing pages, and blog templates where the color system is less controlled.
A Simple Workflow
- Choose the darkest text color you can support across the system.
- Set button and link colors after confirming text and surface contrast.
- Pair status colors with text and icon colors, not just with matching tints.
- Use the RGB to HEX and HEX to HSL tools when iterating toward stronger shades.
FAQ
What should normal text target for contrast? ⌄
A practical baseline is WCAG AA support for normal text. That keeps the system usable in more real reading conditions than only checking large display headings.
Do brand colors always need to change for accessibility? ⌄
Not always. Many teams keep the same hue and simply move to darker or lighter shades depending on whether the color is used for text, fills, borders, or backgrounds.
Should accessibility checks happen only once? ⌄
No. Re-check contrast when new themes, states, marketing pages, or campaign templates are added, because those are common places where color discipline breaks down.