Skip to main content
Free tool

Brand color checker

Can you put white text on your brand color? See the answer, not a swatch - with the exact contrast ratios and a shade that works when yours does not.

Your colors

Showing #ffd400 - a bright yellow, because it is the case worth seeing: white text on it is unreadable, which is exactly what most people put on a colored button.

White text on your color Not readable 1.43:1 · fails Your color would need to be #856e00 for this to work.
Black text on your color Readable 13.19:1 · AAA
Your color as text Not readable 1.43:1 · fails Your color would need to be #856e00 for this to work.
Your color on black Readable 13.19:1 · AAA

A working range of your color

Lighter for backgrounds, darker for text. Each one shows how it reads on your page background - a swatch on its own tells you nothing.

Much lighter #ffee99
1.2:1 too light for text
Lighter #ffe14d
1.3:1 too light for text
Your color #ffd400
1.4:1 too light for text
Darker #b39400
2.9:1 too light for text
Much darker #665500
7.3:1 text ok
What to do with it
  • Use DARK text on this color, not white. White is what most people reach for on a colored button and it would not be readable here.
  • Your color is not readable as body text on #ffffff. Use it for buttons, headings and accents, and set your paragraphs in something darker.
These are WCAG's numbers, not ours. 4.5:1 is the minimum difference for normal body text, 3:1 is enough for large or bold text. The calculation comes from the same class the builder's theme uses, so a pair this page calls readable is one your site treats as readable. We say nothing about which colors go together - that is taste, and we have no evidence about yours.

How this is worked out

Every figure is a WCAG contrast ratio, computed with the published relative-luminance formula by the same class the builder's theme uses, so a pair this page calls readable is one a Webkio site treats as readable. The thresholds are WCAG 2.2's: 4.5 to 1 for body text and 3 to 1 for large text. Where both white and dark text fail, the tool walks your color lighter or darker until a shade passes and shows that shade. It never substitutes a different hue, and it says nothing about which colors go together, because that is taste and we have no evidence about yours.

Standards and documentation it follows

Guides that use this

Quoting this tool

Free to quote and link. Cite it as Brand color checker, a free tool by Webkio, https://webkio.com/brand-color-checker. The method above is the whole method, so a figure you quote can be checked by anyone with the same inputs.

Link to this tool

<a href="https://webkio.com/brand-color-checker">Brand color checker</a> by Webkio

Share your result

A link that opens this tool with your numbers already filled in, so the person you send it to sees the same result.

Questions

Because readability depends on the difference in brightness, not on whether the colors look nice together. Yellows, limes and light blues are bright, so white on them is very hard to read - and white is exactly what most people reach for on a colored button. Dark text on the same color is usually fine.

They are from WCAG, the international accessibility standard. 4.5:1 is the minimum difference for normal body text (that is level AA), 3:1 is enough for large or bold text, and 7:1 is the stricter AAA. These are not our numbers and not negotiable - which is why this tool can be exact rather than opinionated.

No. A color that cannot carry body text still works perfectly well for buttons with large labels, badges, borders, icons and headings. What you should not do is set paragraphs or small print in it, or put white text on it and hope. The suggested shade is there if you want a version that does carry text.

Because which colors go together is taste, and we have no evidence about yours. Every number here is arithmetic from a published standard. A tool that mixed the two would be lending the authority of the first to the guesswork of the second.

The same contrast calculation, from the same class the builder's theme uses - so a pair this page calls readable is the one your site treats as readable. The accessibility checker runs it across a whole page, but only where an element sets both colors itself; here you supply them, so the answer is always available.

More free tools

Accessibility checker
LocalBusiness schema generator
AI visibility checker
Seasonal rate calculator
Website cost calculator
Car rental commission calculator

See all free tools