Free tool Color contrast checker for WCAG 2.2
Enter a text color and a background color to get the contrast ratio and a pass or fail for every WCAG 2.2 level. When a pair fails, the tool finds the closest color that passes, keeping the hue, so the fix still looks like your brand. A second panel checks a brand color the way a chat widget actually uses it.
- WCAG 2.2 AA and AAA
- Nearest passing color
- Runs in your browser
Check a color pair
Type HEX, RGB, HSL, OKLCH or a CSS color name, or use the color picker. Results update as you type; the share link keeps both colors.
The color of the text, icon or border you are checking.
What the text sits on. A semi-transparent background is treated as sitting on white.
Examples
Contrast ratio
4.54:1
#767676#FFFFFF
- AA · normal textNeeds ≥ 4.5:1 · WCAG 1.4.3 Pass
- AA · large textNeeds ≥ 3:1 · WCAG 1.4.3 Pass
- AAA · normal textNeeds ≥ 7:1 · WCAG 1.4.6 Fail
- AAA · large textNeeds ≥ 4.5:1 · WCAG 1.4.6 Pass
- AA · icons, borders, controlsNeeds ≥ 3:1 · WCAG 1.4.11 Pass
How it looks
Body text at 16 px, large text at 24 px, bold text at 19 px, plus a button, an input border and an icon in the same two colors.
Your order ships within 24 hours. Questions about sizing? Ask us any time.
Free returns for 30 days
Chat with us now
Add to cart Email address
Nearest passing colors
Only the lightness changes (in OKLCH), so the hue stays. Click a color to apply it. If one direction cannot reach the target, try the other.
-
To reach 7:1
Keep the background, change the text
Keep the text, change the background
Not reachable by changing lightness alone
Share these inputs: the values go after the # in the link, so they never reach a server.
https://tapcub.com/tools/color-contrast-checker
Chat widget and button colors
A chat widget puts white text on your brand color in the header, the launcher and the visitor’s own messages, and uses the brand color for links on a white panel. This preview follows the TapCub widget’s actual styles, so it shows every pair your one color creates. The same check applies to any button with white text.
The color you would set as the widget color.
| Where in the widget | Colors | Ratio | WCAG |
|---|---|---|---|
| White text on the brand color: header, launcher, visitor messages, new-message button | 2.80:1 | Fail < 4.5:1 | |
| White text on the darker end of the header gradient | 4.71:1 | Pass ≥ 4.5:1 | |
| Brand-colored links and buttons on the white panel | 2.80:1 | Fail < 4.5:1 | |
| Brand-colored initials and the “AI” tag on the light tint | 2.33:1 | Fail < 4.5:1 | |
| Brand-colored links in dark mode (#111827 panel) | 6.32:1 | Pass ≥ 4.5:1 | |
| The launcher button against a white page (non-text, 3:1) | 2.80:1 | Fail < 3:1 |
White text on this brand color is hard to read. The closest color with the same hue that passes is #C35600 (4.51:1 with white). It also fixes brand-colored links on white, because contrast works both ways.
The widget derives two colors from yours: the gradient end #BB5611 (25% darker) and the light tint #FEE6D5 (82% toward white).
Version v1.0Updated Update history
What the ratio and the five checks mean
The ratio runs from 1:1 (same color) to 21:1 (black on white). WCAG sets thresholds on it by text size and by level.
AA, normal text (4.5:1)
The level most laws and procurement rules point to. It applies to body text, labels, links, placeholders and text inside buttons. If you only meet one level, meet this one.
Large text (3:1 for AA)
Large means at least 18 pt (about 24 CSS px) at regular weight, or 14 pt (about 18.66 px) bold. A 16 px bold button label is not large text, so it still needs 4.5:1.
AAA (7:1, large 4.5:1)
An enhanced level that helps readers with low vision. WCAG does not expect whole sites to meet AAA, but long-form reading and support content benefit from it.
Non-text (3:1)
Icons that carry meaning, input borders, focus rings, chart lines and the edges of a button all need 3:1 against what sits next to them (SC 1.4.11). A pale border on a white form is the usual miss.
The ratio is shown cut to two decimals, never rounded up: 4.499:1 shows as 4.49:1 and fails, as W3C’s guidance on SC 1.4.3 requires.
Three steps
Works with the colors straight from your CSS or design tool.
-
1
Enter both colors
Paste values from your stylesheet or design file, or use the picker. Semi-transparent colors are blended first, the way a browser would draw them.
-
2
Read the five checks
Decide which applies: body text needs AA normal; big headings may only need AA large; icons and borders need the non-text check.
-
3
Apply a fix and share
Click a suggested color to apply it, then copy the share link for your designer or developer. For a chat widget, check your brand color in the second panel.
How WCAG calculates contrast
Contrast is a ratio of relative luminance: how bright each color is to the eye, on a linear scale.
- Each 8-bit channel is divided by 255 and linearized: c ≤ 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055)^2.4
- Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B; green dominates because the eye is most sensitive to it
- Ratio = (L of the lighter color + 0.05) ÷ (L of the darker color + 0.05); the 0.05 accounts for screen flare
- Suggestions keep OKLCH hue and chroma and search lightness only, so the fix stays recognisably the same color
| Criterion | Level | Normal text | Large text | Non-text |
|---|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 | 3:1 | — |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 | 4.5:1 | — |
| 1.4.11 Non-text Contrast | AA | — | — | 3:1 |
| EN 301 549 V3.2.1, clause 9 (EU) | Adopts WCAG 2.1 AA | 4.5:1 | 3:1 | 3:1 |
Why #767676 is the gray designers remember
Gray text on white, worked through by hand. The same numbers appear in WebAIM’s contrast checker.
| Step | Value | Note |
|---|---|---|
| Channel value | 0x76 = 118 → 118 ÷ 255 = 0.4627 | All three channels are equal for a gray |
| Linearized | ((0.4627 + 0.055) ÷ 1.055)^2.4 = 0.1812 | Above 0.04045, so the power curve applies |
| Relative luminance | 0.1812 (white = 1.0) | For a gray, L equals the linear value |
| Ratio | (1.0 + 0.05) ÷ (0.1812 + 0.05) = 4.54:1 | Passes AA normal text, fails AAA |
| One step lighter | #777777 → 4.47:1 | Fails AA; #767676 is the lightest gray that passes on white |
For AAA on white the gray has to go down to #595959 (7.00:1), which is what the suggestion panel offers for this pair.
Where contrast usually fails
Most failures are not body text. They hide in states and small details.
White text on a bright brand color
Orange, yellow, light green and sky blue rarely reach 4.5:1 with white. Use a deeper shade for buttons and widget headers, and keep the bright one for large shapes.
Placeholder and disabled text
Placeholders count as text. Light gray placeholders around #b0b0b0 sit near 2:1. Disabled controls are exempt, but placeholders are not.
Borders and focus rings
An input border of #e5e7eb on white is about 1.2:1. Users who cannot see the field cannot find it. Borders that identify a control need 3:1.
Text over photos
One ratio cannot describe a photo. Put text on a solid or semi-opaque panel and check the panel color instead.
Your color, in the chat widget
The live chat widget takes one brand color and builds the header, launcher and buttons from it.
Widget color and logo
Set the brand color, logo, corner and welcome message so the widget looks like part of your site.
Learn moreVisitors who need help
Readers who struggle with a page can ask in chat while they are on it, and agents see which page they are on.
Learn moreHosted chat page
No website yet? Share a chat link that uses the same name, logo and color.
Learn moreColor contrast questions
Still have a question?
Chat with the team behind TapCub — we usually reply within a few hours on business days.
What is a good color contrast ratio?
For normal text, 4.5:1 or more meets WCAG 2.2 level AA, and 7:1 meets AAA. Large text (24 px regular or about 18.66 px bold) needs 3:1 for AA and 4.5:1 for AAA. Icons, input borders and other non-text parts need 3:1.
How do I check color contrast for WCAG?
Enter the text color and the background color above. The tool computes the relative luminance of each, divides the lighter by the darker (each plus 0.05) and compares the ratio with every WCAG threshold. You can also use the color picker to sample colors.
Does white text pass on my brand color?
Put your brand color in the background field and #ffffff as the text, or use the chat widget panel. Many popular brand colors, including most oranges, yellows and light greens, fall below 4.5:1 with white; the tool suggests the closest shade that passes.
Can I round 4.48:1 up to 4.5:1?
No. W3C’s guidance on SC 1.4.3 says the threshold is a hard minimum, so a ratio just below it fails. This tool shows two decimals by cutting off, not rounding, so what you see never overstates the result.
What counts as large text?
WCAG defines large scale as at least 18 point, or 14 point bold. In CSS that is roughly 24 px regular or 18.66 px bold. Most button labels and chat messages are smaller, so they need the normal-text ratio.
How is this different from the color converter?
The color converter turns one color into HEX, RGB, HSL, OKLCH and CMYK. This page is about readability: two colors, every WCAG level, fixes in both directions and a widget preview.
What about APCA and WCAG 3?
APCA is a newer contrast method proposed for WCAG 3, which is still a working draft. Laws and audits today refer to WCAG 2.x ratios, so this tool uses those. Passing WCAG 2.2 here does not guarantee an APCA score.
Update history
New features, fixes and data refreshes for this tool, newest first.
-
· v1.0
LaunchedFirst release.
Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates
Use the color where visitors talk to you
Set a readable brand color on the chat widget and answer visitors while they are on the page.