Linkedin
Lucid Virtual Solutions
Schedule A Call

Contrast Checker

Online WCAG Colour Contrast Checker

Tailored elearning Built for Your Business

We design and develop custom training solutions for your business goals.

Click on the foreground and background colour pickers to begin the contrast test. Adjust the hex codes or use the sliders to find the perfect combination.
If you see “PASS” in the results dashboard, your colour combination meets international accessibility standards!

Colour Contrast Checker

Ensure your website meets WCAG 2.1 accessibility standards.

Sample Text: How does this combination look?
Contrast Ratio --
WCAG AA
--
WCAG AAA
--

Steps to use this tool:

  • Step 1: Use the colour pickers to select your desired text and background colours.
  • Step 2: Check the Contrast Ratio. A higher ratio ensures better readability for your audience.
  • Step 3: Review the WCAG AA and AAA status. Aim for a 'Pass' on at least AA for standard web compliance.
  • Step 4: Adjust the shades until you achieve a high-contrast result that is easy on the eyes.

Privacy Note:

We do not store data entered into this tool.
Only minimal usage analytics (like page visits) are collected for performance tracking.

How to test colour contrast?

1. Select Your Brand Colours

If you have specific brand guidelines, copy and paste the Hex codes directly into the input boxes.

  • Click on the Text Colour box to choose your font colour.
  • Click on the Background Colour box to choose the surface colour.
  • The Contrast Ratio will update instantly as you make changes.
  • Check the sample text area. If the text is easy to read against the background, you are on the right track!

 

2. Understand the WCAG Compliance Results

If the ratio is too low, the tool will show a “FAIL” status. Here is how to fix it:

  • WCAG AA: Requires a minimum ratio of 4.5:1. This is the standard for most business websites.
  • WCAG AAA: Requires a minimum ratio of 7:1. This is the highest level of accessibility for maximum readability.
  • If you fail, try making the text darker or the background lighter (or vice-versa) until the ratio improves.

 

3. Test Large Text vs. Normal Text

Contrast requirements are slightly more relaxed for larger fonts.

  • For text larger than 18pt (or 14pt bold), a ratio of 3:1 is often acceptable for AA.
  • However, we recommend aiming for 4.5:1 to ensure a premium user experience for everyone, regardless of font size.

 

4. Testing External Design Assets

If you are designing graphics for social media, Canva, or Photoshop, use this tool to verify your colours before exporting.
If the colours don’t look right on different screens, check:

  • Is your monitor’s brightness set too low?
  • Are you using “Night Mode” or a blue light filter?
  • Is your display colour profile set to sRGB?

 

Update Display Drivers on macOS:

  • Click Apple Menu > System Settings > General > Software Update.

 

Update Display Drivers on Windows:

  • Open Control Panel > Device Manager.
  • Go to Display Adapters.
  • Right-click your Graphics Card and select Update Driver.

 

5. Company Branding Restrictions

If you are using a work laptop or corporate design system, certain colours might be locked by your brand team.

  • If your brand colours fail the test, contact your UX/UI Design team to request an “Accessible Palette” version for web use.

 

6. Re-check After Theme Changes

If you recently updated your WordPress theme or CSS and the text looks blurry:

  • Open this Colour Contrast Analyser.
  • Input the new theme colours.
  • If they fail, adjust your theme’s CSS or Customiser settings immediately.
  • Refresh your site and re-test!

 

Final Check

Look at the Sample Text box and check the Ratio. If the ratio is high and you see the green tick, your website is officially accessible!

Got issues? Try using high-contrast combinations like Black on White or Dark Blue on White.