Color Contrast Checker

Instantly verify that your foreground and background colour combinations meet WCAG AA and AAA accessibility standards — with suggested fixes when they don't.

— what it is

The Color Contrast Checker calculates the contrast ratio between any two colours and tests whether they pass WCAG 2.1 Level AA and AAA accessibility criteria. Enter your text and background colours, get an instant ratio and pass/fail result, and see actionable suggestions to fix any failing pairs. It's aimed at designers, developers, and anyone building accessible digital products.

— key features
  • ✓Real-time contrast ratio calculation for any two colours
  • ✓Clear WCAG AA and AAA pass/fail results for normal and large text
  • ✓Accepts hex, RGB, and HSL colour values plus a visual colour picker
  • ✓Fix suggestions — adjusted colours that would pass the failing standard
— who it is for
  • →UI/UX designers verifying colour palette accessibility during design
  • →Front-end developers checking text, button, and icon contrast in code
  • →Accessibility auditors performing WCAG compliance reviews
  • →Content teams and marketers ensuring brand colours are accessible
— how to use it
01Enter your foreground (text) colour using the picker or by typing a hex/RGB/HSL value
02Enter your background colour the same way
03See the contrast ratio and WCAG AA/AAA results update instantly
04If it fails, review the suggested fix colours and adjust your palette accordingly

No tutorials. No learning curve. Open it and get started.

— why it stands out

Runs in your browser. All contrast calculations happen locally — no colour data is sent to any server, keeping your design work private.

Completely free. No trial period. No premium tier for basic functionality. No account required.

One job, done well. The Color Contrast Checker was built to solve a specific problem cleanly. No feature bloat, no ads, no distractions — just fast, accurate WCAG contrast checking.

— at a glance
  • ✓Free — no hidden costs, no premium tier
  • ✓No sign-in or account required
  • ✓Runs entirely in your browser — no server uploads
  • ✓Works on desktop and mobile
  • ✓Instant results — no processing delays
— frequently asked questions

What is the minimum contrast ratio for WCAG AA compliance?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). The checker calculates and displays your ratio alongside a clear pass or fail result.

What is WCAG AAA and do I need it?

WCAG AAA is the highest accessibility level, requiring a 7:1 ratio for normal text. Most public websites target AA compliance. AAA is recommended for interfaces used by people with low vision or for maximum inclusivity.

Can I enter colours in formats other than hex?

Yes. The tool accepts hex (#RRGGBB), RGB, and HSL colour values. You can also use the built-in colour picker to select colours visually.

Does the tool suggest fixes when contrast fails?

Yes. When a pair fails WCAG AA or AAA, the tool suggests adjusted colour values that would pass, so you can iterate quickly without guessing.

Is this tool suitable for checking UI components as well as text?

Absolutely. WCAG 1.4.11 requires a 3:1 contrast ratio for UI components and graphical objects. The checker helps you validate buttons, icons, form borders, and other non-text elements too.

— ready to use it? Open Color Contrast Checker →

Free · No sign-in needed · Runs in your browser