Readable Text Color Generator
Find readable text colors for your background, with WCAG contrast ratios and live previews.
You might also need: Website Color Palette Preview , Random Gradient Generator , 5-Color Palette Generator and more
Choose your background
Enter 3 or 6 hexadecimal digits, with or without #, such as #FFF or #1E3A8A. Solid sRGB colors only.
Large text means at least 24 CSS px at normal weight, or 18⅔ CSS px in bold. The large-text preview uses 24 px.
Text color suggestions
Generate suggestions to see readable text colors for your background.
Suggestions are filtered from a fixed palette of black, white, grays, and colored options. Only qualifying colors appear; this is not every possible RGB color. Higher thresholds can reduce the results. Editing the background or requirement clears the previous results.
Displayed ratios are rounded to 2 decimal places. Ratios use the WCAG 2 sRGB formula and are compared without rounding. These results assess text contrast for this solid color pair only. Font choice, opacity, images, gradients, and the rest of your page need separate checks.
How to find readable text colors
- Enter your solid background color as HEX, or use the color picker.
- Choose normal-text AA (4.5:1), normal-text AAA (7:1), or large-text AA (3:1), then generate suggestions.
- Type your own preview text, compare the suggested colors and their ratios, and copy a HEX value or the foreground/background CSS declarations.
Text color ideas for your design
- Use #FFFFFF as a background to explore dark text colors for a business website or checkout form.
- Use #1E3A8A to find light text options for a navigation bar or dashboard header.
- Try #777777 with the 7:1 threshold to see why some midtone backgrounds cannot support normal-text AAA contrast.
Frequently asked questions
How does this differ from a contrast checker?
This generator starts with one background and suggests text colors that meet your selected threshold. A contrast checker evaluates a foreground/background pair you already chose.
Why can the AAA result be empty?
Some midtone backgrounds cannot reach 7:1 with any text color. Black and white provide the darkest and lightest endpoints; if both fail, no opaque sRGB text color can meet that threshold. Changing the background may help.
Does 3:1 work for ordinary paragraph text?
No. The AA threshold for normal text is 4.5:1. The 3:1 option applies to large text: at least 18 pt (24 CSS px) at normal weight or 14 pt (18⅔ CSS px) in bold.
Does a passing color make my entire website accessible?
No. These calculations cover text contrast for an opaque solid sRGB pair. Review your actual typography, focus states, content, keyboard support, images, and other accessibility requirements separately.
Are my colors or preview text uploaded?
The calculation and previews run in your browser tab. This tool does not save your colors or preview text or include them in analytics events. Copying writes only the requested HEX or CSS to your clipboard.
Your background color, preview text, and results stay in this browser tab. The tool does not save them or include them in analytics events. Copy a HEX value or CSS if you want to keep it.
Find this tool useful? Share it with your team to speed up your workflow.
If you like it, tap to support it; if it needs improvements, tap and we’ll prioritize updates.