What’s awesome

  • Web app
  • Works offline
  • Compact
  • Free
  • No signup
  • Lightness sliders
  • Supports WCAG 2.0/2.1/2.2 AA/AAA
  • Pick colors from any window
  • Designed with accessibility in mind

Simple to use

  1. 1

    Pick colors

    Choose the foreground and background colors.

  2. 2

    Check contrast

    See if the color combination passes or fails.

  3. 3

    Tweak lightness

    Adjust the lightness of colors if needed.

  • Regular
  • Large
  • UI/Graphics
Color contrast ratio: 21

FAQ

  • Clear contrast is a color contrast checker.

    Input foreground and background colors and this tool calculates the contrast between them in a ratio format based on the Web Content Accessibility Guidelines (WCAG).

    The result shows if the colors pass the required contrast level, depending on the whereabouts of the colors - Regular, Large or UI/Graphics.

  • Anyone who wants to check the contrast between colors!

    Designers, developers, artworkers, project managers, accessibility auditors etc.

    Clear contrast has been designed to be used by anyone, it’s not just a color tool for designers.

    • Compact size - Small so it doesn’t get in the way.
    • Works offline - Works if you’re on a train or aeroplane or have a weak internet connection.
    • No installation - Perhaps the IT department has locked you down from downloading and installing applications, but you might still be able to "install" the web app.
    • Eyedropper - Quick way of grabbing colors. It’s also excellent for checking colors that aren’t in simple places like gradients or text on images.
    • Simplicity - Core features without overcrowding. It’s a color contrast checker, not a color palette generator.
    • Lightness sliders - Sometimes you want to adjust the color so it passes, but you don’t want to change too much of the color itself. Clear contrast uses LCH (Lightness, Chroma, Hue) to adjust lightness. This is because LCH has a uniform brightness across all colors, whereas HSL has colors which are brighter and darker than others.

  • I created it out of frustration with existing tools.

    I could never find one that felt right and was never happy with using any of them. They lacked features, crashed/buggy, ugly, overcomplicated, too large etc.

  • Firefox and Safari do not currently support the eyedropper feature.

    I recommend using Chrome or Edge for now.

  • The contrast ratio is based on the Web Content Accessibility Guidelines (WCAG). WCAG is referenced in many accessibility-related laws around the world including the Equality Act 2010 (UK), Rehabilitation Act 1973 (US), and European Accessibility Act (EAA) 2022 (EU).

  • These are the content types where you test the colors:

    • Regular text is less than 24px (18pt). When bold, it is less than 18.5px (14pt).
    • Large text is 24px (18pt) and above. When bold, it is 18.5px (14pt) and above.
    • UI/Graphics is for testing non-text colors in your user interface such as icons, buttons, borders or graphics such as charts.