Colors
Accessible Text Color Picker
Used by developers, writers, and creators worldwide.
An accessible text color picker takes any background color and tells you whether black or white text reads better on top of it, with the real WCAG contrast ratio to back the choice. Paste a background hex and it computes the relative luminance of the color, compares it against pure white and pure black using the official WCAG formula, and returns whichever gives the higher contrast ratio along with the AA or AAA rating. This removes the guesswork from picking readable text on buttons, cards, badges, and banners, and it flags combinations that fall short of the 4.5:1 minimum for normal body text. Developers and designers use it to keep interfaces legible and compliant without opening a separate checker. Every result is a ready-to-paste hex code plus the numbers you need to justify the decision in a design review or accessibility audit.
Read the complete guide — 5 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Paste your background hex color.
- Click Generate to evaluate black versus white text.
- Read the recommended text color and its contrast ratio.
- Use the color if it reaches at least WCAG AA.
Use Cases
- •Choosing readable text color for a colored button
- •Picking label color over a badge or chip background
- •Checking whether a banner needs white or black text
- •Verifying a card background passes WCAG AA for body text
- •Documenting contrast ratios in an accessibility audit
Tips
- →Aim for 4.5:1 or higher for normal body text.
- →Large or bold text can pass at 3:1.
- →If both options fail, darken or lighten the background.
- →Pair with a focus ring generator for fully accessible buttons.
FAQ
how is the contrast ratio calculated
It converts each color to relative luminance using the official WCAG sRGB formula, then divides the lighter luminance plus 0.05 by the darker plus 0.05. The result ranges from 1:1 (identical) to 21:1 (black on white).
what ratio do i need to pass
WCAG AA requires 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1. The picker reports which level your background reaches with its best black-or-white text choice.
why only black or white text
Black and white are the safest, highest-contrast neutrals and one of them almost always maximises legibility on a solid background. For brand-colored text, use a dedicated contrast pair generator instead.
You might also like
Popular tools from other categories that share themes with this one.