One-click fixes
Get the closest AA and AAA colour for your text or background, keeping the same hue, and apply it instantly.
☕ Support ProFigma
Did this tool save you time? Buy me a coffee.
Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.
- Keeps every tool free
- Funds new tools & features
- Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How to Use the Color Contrast Checker
Pick two colours
Type a hex code such as #767676 or #fff, use the colour picker, or pick straight from your screen. Swap them with one click.
Read the WCAG result
The contrast ratio updates as you type, with a pass or fail for AA, AAA, large text and UI components.
Apply a fix
If the pair fails, open Fixes and apply the nearest passing colour. Your hue stays the same, only the lightness changes.
More Than a WCAG Contrast Checker
Most color contrast checker tools only tell you that a colour fails. This one shows you how to fix it and how it looks to real people.
All five WCAG checks
AA and AAA for normal and large text, plus the 3:1 rule for buttons, icons and form borders.
Colour-blind preview
See your design with protanopia, deuteranopia, tritanopia and full colour blindness.
Palette grid
Add up to 8 brand colours and test every text and background pair in one table.
APCA score
An APCA contrast checker is built in, so you can see the WCAG 3 draft Lc score next to the WCAG 2.2 ratio.
Share and copy
Copy a link to the exact colour pair for your team, or copy ready-to-use CSS.
Who Needs an Accessible Color Checker?
UI designers
Check every text style and button in a Figma design system before handing it off.
Developers
Fix audit failures from Lighthouse or axe with a passing colour and copy the CSS.
Brand teams
Test the whole brand palette at once and document which pairs are safe for text.
Accessibility auditors
Measure exact ratios, including semi-transparent text, and share the result as a link.
What Is a Contrast Ratio in a Color Contrast Checker?
A color contrast checker compares the brightness of two colours and gives the result as a ratio from 1:1 (no difference) to 21:1 (black on white). The higher the number, the easier the text is to read.
The ratio is based on relative luminance, which weights green more than red or blue because our eyes are most sensitive to it. That is why a bright yellow on white fails even though the colours look very different.
This contrast ratio checker shows the result with two decimals and never rounds a failing pair up to a pass. A pair at 4.497:1 shows 4.49 and fails, so you are never told a colour passes when it does not.
WCAG AA vs AAA: Which Level Do You Need?
| Check | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| Buttons, icons, input borders | 3:1 | – |
Most laws and company policies ask for WCAG AA. The W3C explains the rule in Understanding Contrast (Minimum), and the stricter level in Contrast (Enhanced). Aim for AAA on long reading text like articles and documentation.
Pro tip: #767676 is the lightest grey that passes AA on white (4.54:1). #777777 looks almost the same but fails at 4.48:1 – always test it in a color contrast checker, never guess.
Contrast for Buttons, Icons and Form Fields
WCAG 2.2 also covers things that are not text. Icons, input borders, focus rings and chart lines need at least 3:1 against the colours next to them, as described in Non-text Contrast.
The UI components row in the tool checks this rule for you, and the live preview shows a button, a link, an input and an icon in your colours.
Semi-transparent text
Designers often use grey text as black at 60% opacity. Set the opacity slider and the checker blends the colour over the background first, so the ratio matches what users really see.
How to Check Contrast in Figma, CSS and Real Projects
A color contrast checker is most useful early, while colours are still easy to change. Test each text style in your design system once, then reuse only the pairs that pass.
In Figma
Copy the hex values from the fill panel and paste them into the color contrast checker above. With the palette grid you can add your whole brand palette and see every safe pair in one table, instead of checking them one by one.
In CSS
Use the EyeDropper button (Chrome and Edge) to pick colours straight from your live site. After you apply a fix, click Copy CSS to get the color and background-color lines with the ratio as a comment, ready for code review.
For a whole team
Send the share link with every bug report, so designers and developers look at exactly the same colours. A WCAG contrast checker result with a link is much faster to fix than a screenshot.
Run the color contrast checker again whenever you add dark mode, a new brand colour or text on images – these are the places where contrast breaks most often.
APCA and WCAG 3: What Changes?
APCA (Accessible Perceptual Contrast Algorithm) is the new method in the WCAG 3 working draft. It gives an Lc score instead of a ratio and treats dark text on light and light text on dark differently.
Our APCA contrast checker tab shows the Lc score and which text sizes it suits. It is still a draft, so use the WCAG 2.2 result for compliance today. MDN's colour contrast guide is a good next read.
Design with accessible colours from the start
- Pick text colours from the palette grid, not from memory.
- Check hover, focus and disabled states, not only the default.
- Never use colour alone to show meaning – add an icon or label.
Planning the layout too? Build it with the UI grid maker, and tidy your headings with the case converter.
Bookmark the ProFigma color contrast checker and test every colour pair before you ship: free, instant and private.
Frequently Asked Questions
What is a good color contrast ratio?
At least 4.5:1 for normal text and 3:1 for large text meets WCAG AA. For the best readability aim for 7:1, the AAA level.
Is this color contrast checker free?
Yes. It is 100% free with no signup. Everything runs in your browser and your colours are never sent to a server.
What counts as large text in WCAG?
Large text is at least 24px (18pt) regular or 18.66px (14pt) bold. Large text only needs 3:1 for AA and 4.5:1 for AAA.
How does the one-click fix work?
The tool keeps the hue and saturation of your colour and moves only its lightness until the pair passes. It picks the closest passing colour, so your design changes as little as possible.
Does WCAG apply to buttons and icons?
Yes. WCAG 2.2 success criterion 1.4.11 asks for at least 3:1 contrast for icons, input borders, focus indicators and other important UI parts.
What is APCA?
APCA is the contrast method proposed for WCAG 3. It gives an Lc score based on how people see text. It is still a draft, so WCAG 2.2 ratios remain the legal standard.
Can I check text with opacity?
Yes. Set the opacity slider and the checker blends the text colour over the background before it calculates the ratio.
Can I share a colour pair with my team?
Yes. Click the link button in the result panel to copy a URL that opens the checker with the same colours.
More free tools
QR Code Generator
Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.
Case Converter
Switch text between 15+ cases in one click.
Image Compressor
Shrink photos up to 90% right in your browser.
UI Grid Maker
Design Figma and CSS grids with a live calculator.
PNG to JPG Converter
Bulk convert images in three steps.
FAQ
Frequently asked questions
What contrast ratio does WCAG require?
For AA, normal text needs at least 4.5:1, large text needs 3:1, and UI components and icons need 3:1. For AAA, normal text needs 7:1 and large text needs 4.5:1. The tool shows pass or fail for each level.
What happens if my colors fail?
Open the Fixes tab and apply the nearest passing color. The fix keeps your hue and changes only lightness, so the color still feels like your brand while meeting the contrast requirement.
What is APCA and should I use it?
APCA is a lightness contrast method from the WCAG 3 working draft. The tool shows an APCA score for reference, but WCAG 2.2 ratios remain the standard to use today for compliance and legal requirements.
Can I check a whole palette?
Yes. The palette view lays out text colors against background colors in a grid, and you can click any cell to check that pair. This is useful for design systems with several brand and neutral colors.
Does it check UI components as well as text?
Yes. Besides normal and large text, it reports whether a color pair meets the 3:1 requirement for UI components and icons from WCAG 1.4.11, and shows a live preview with a button, link and input field.