SiteBrite SVGsColor contrast checker
Is your text easy to read on its background? Pick the two colors to see the contrast ratio, whether it passes WCAG AA and AAA, and the nearest colors that do.
Type a code like #2F5D46 or pick one. The screen eyedropper in the picker can take a color from your current website.
7.4:1
Fresh bread every morning
Open Tuesday to Sunday, 7 am to 3 pm. Call ahead for whole cakes and catering.
Small print, like a footer or a caption.
- AA, normal text (4.5:1)
- AA, large text (3:1)
- AAA, normal text (7:1)
- AAA, large text (4.5:1)
- Icons and buttons’ edges (3:1)
Check your whole palette
Every pair of colors in your palette that has text on it. Pick a palette or set your brand’s colors, and this follows.
Use your brand’s colors from a logo, color codes or one color
Set them once and every picture, download and ZIP uses them. They’re saved in this browser.
Main color
Accent color
Hex codes like #2F5D46, or rgb(47, 93, 70), separated by spaces, commas or lines; a list from a palette site works too. We sort them into Main, Accent, Dark and light colors and work out the rest.
Accent color
Pick your main color, then how the accent sits beside it. “Pick from screen” can take a color from anywhere on your screen, like your current website.
Change any color · your changes are on
Start from a palette or your brand’s colors, then change any color. Every picture follows, and so do ZIPs.
| Where | Sample | Ratio | Normal text | Large text |
|---|
Questions
What contrast ratio do I need?
For WCAG AA, the level most laws and guidelines point to, normal text needs at least 4.5:1 against its background and large text (24px, or about 19px bold) needs 3:1. Icons and the edges of buttons and form fields need 3:1. AAA asks for 7:1 for normal text.
How is the contrast ratio worked out?
Each color’s brightness as the eye sees it (its relative luminance) is compared: the lighter one plus 0.05, divided by the darker one plus 0.05. Black on white is 21:1, the most there is; a color on itself is 1:1.
My brand color fails. Do I have to change it?
No. Keep it for big headings, buttons with white text if that passes, and shapes, and use the nearest passing shade this checker suggests for small text and links. Most people never notice the difference, but everyone can read it.
Is a passing contrast enough to make my site accessible?
No. Contrast is one of many things. Pictures need descriptions, forms need labels, and everything should work with a keyboard. The free accessibility checker looks at more of them.
More free tools
From the makers of these tools
Every SiteBrite color scheme is checked for contrast before you see it
SiteBrite builds professional websites for small businesses: hours that are always right, your menu or prices, events, bookings and a Spanish version, in your colors. You change words and photos yourself. $7 a month.