Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility

It is a sunny day. The sun is so dazzling in your eyes as you are walking in to your office from lunch. You want to finish up an email so quickly but your eyes are not so obedient to look at the computer screen as it has just entered a contrastive suddenness and they need some time to settle. They just scream for a contrastive screen or color inversion. As a common man, we all must have encountered a similar unsettling, if not the same scenario at any point in time.

Now, What to do?

Whether you are designing, developing, testing or auditing the accessibility of a user- interface component, The first step you can take to make sure that their product is accessible is to make sure that it passes the color contrast requirements of Web Content Accessibility Guidelines. Making sure that your design passes the color contrast requirements help low vision users, color blind users & people who have situational disabilities. This is one of the easy fix to approach from the accessibility standpoint & there are a great number of tools that will help us determine the color contrast requirements which we will take a peak into below.

WCAG Requirements for Color Contrast

To meet the level AA success criteria text smaller than 18 point (or 14 point if bold) must have a 4.5:1 contrast ratio. All larger text must have a contrast ratio of 3:1 or greater.

The more stringent AAA criteria the requires text under 18 point (or 14 point if bold) to exceed a contrast ratio of 7:1. All larger text must have a contrast ratio of at least 4.5:1. Remember, all these numbers are the result of well-researched user study and they fit the requirement most people if not all.

How to check for accessible colors

Color Contrast Analyzers & WCAG Color Contrast Generators

• Accessible Color Generator by Learn UI Design
• Accessible color palette builder
• Accessible Colors | WCAG 2.0 AA and AAA color contrast checker evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility. If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness. We modify the lightness value only, in order to stay as true to the original color as possible.
• APCA CONTRAST CALCULATOR
• Brandwood A11y : Text on background image a11y check
• Button Contrast Checker by Aditus
• Check My Colours Check My Colours is a web-based tool for checking your website’s foreground and background colors. It’ll check all stacked web page elements based on W3C’s WCAG recommended luminosity contrast ratio and color brightness. It’s easy to use: just plug in your web page’s URL, press “Check!”, and it outputs a nice tabular report for all elements.
• Cloudflare Design
• Color Contrast Analyzer : Chrome extension
• Color Contrast Checker by Alarmsystem AS
  This tool tests the contrast of a background color and foreground color for accessibility. 
• Color Contrast Checker by Level Access
• Color Contrast Checker Tool | Accessible Web Helper Extension : Chrome Extension
• Color Contrast Tester : By Joe Dolson
• Color Laboratory This uncomplicated web tool allows you to discover color combinations and how they might look like to a person with color blindness. Color Laboratory is very easy to utilize and only requires three basic steps, all of which are outlined in their quick start guide.
• Color Oracle Color Oracle is a desktop tool available for Mac, Windows, and Linux operating systems: it simulates color vision deficiencies. The creators of the tool also have a Design Tips section on their site that shares a couple of useful whitepapers on color accessibility. Note that Windows and Linux users require Java 6.
• Color Palette by A11y Rocks Color is important to any design. However, sometimes the contrast between background and foreground colors are difficult to read, especially for people with a vision impairment.  This tool should help you visualize an entire palette of all color combinations with accessibility in mind. The combinations are ordered by color contrast ratio.
• Color Palette Contrast Checker From deque lab’s git repo
• Color Review
• Color Safe Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
• Color wheel, a color palette generator | Adobe Color
  Color wheel (or image in Extract Theme tab) can be used to generate color palette, which can be saved into Creative Cloud, after signing in.
  You can then use your saved color themes, in Adobe products (Photoshop, Illustrator, Fresco etc.), via Adobe Color theme panel or CC Libraries.
• ColorA11y : Chrome extension
• Colorblind Web Page Filter
  It is a color tool that allows designers the ability to see if they are meeting the needs of users with colorblindness.
• ColorBox by Lyft Design
• ColorCube: A color A11y Tool for Designers & Developers
• ColorShark – WCAG 2.1 AA and AAA Color Contrast Tool Easily test your design colors for contrast accessibility and automatically find the closest accessible colors.
• Colour Contrast Analyser This desktop application (for Windows) is designed for examining your foreground and background color combos for color contrast and brightness. There’s a user guide on the site to help you get started with it quickly, as well as downloads available in several languages.
• Colour Contrast Check The first really intuitive online tool for checking colours that I know of, Jonathan Snook’s Colour Contrast Check lets you input foreground and background colours either by entiering hexadecimal values or by adjusting sliders. The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.
• Colour Contrast Visualiser This tool is an Adobe AIR desktop application for visualizing appropriate color combinations. It’s a wonderful tool for picking your website color palette. If you’re concerned about web accessibility, it’d be a good idea to have this tool around during the design phase of your projects.
• ColourCode
  It is an all-in-one color design tool where you can find different palette categories (analogic, triad, quad, etc.), multiple conversion colors, and even download your custom palette.
• Contrast calculation : Made on codepen by Haydon
• Contrast Checker by Courtesy of Acart Communication This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.
• Contrast Ratio Easily calculate color contrast ratios. Passing WCAG was never this easy! by Lea Verou.
• Contrast-A : Cool website
• contrast-checker by GOV.UK
• Contrast-Finder Contrast-Finder is a tool which computes the contrast between two colors (background, foreground) and checks if the contrast is valid.
• Deque Color Contrast Analyzer Free online tool for evaluating color contrast according to the Web Content Accessibility Guidelines (WCAG).
• DigitalA11Y Color Contrast Checker
  A Chrome extension that checks different color combinations for contrast ratio as per WCAG guidelines and suggests appropriate color pallets that can be appealing too!
  If you are a designer, developer, accessibility expert or an accessibility enthusiast, who want to review your site’s color contrast requirements or perform audits, we have the right tool for you!
• EightShapes Contrast Grid Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.
• Free Color Contrast Checker and Accessible Color Pallet Generator by HolisticA11Y
  This color checker will help you identify if your colors meet WCAG color contrast requirements.
• Generate Accessible UI Colors with a11y-color-tokens
  Generate accessible complementary text or UI colors as Sass variables and/or CSS custom properties from your base color tokens.
• GrayBit One way to check if a design has sufficient color contrast is by converting it to grayscale and seeing which parts are hard to read. Use GrayBit to convert a web page to grayscale; it will even convert web images on that page. It’s a great tool for visualizing a web design’s color contrast and readability.
• Hex Naw
• HTML Color Codes : From dan’s tools (thanks to dan, whoever he is!)
• Leonardo: an open source contrast-based color generator
• Luminosity Colour Contrast Ratio Analyser Juicy Studio has a nifty web tool for analyzing background and foreground color contrast ratio. All you need to do is key in your background and foreground color values in hexadecimal units (for example, a white background is #ffffff) and it will subsequently tell you whether the combination passes WCAG 2.0 contrast recommendations.
• Monsido’s Color Contrast Checker
  Monsido’s Color Contrast Checker tests the contrast of background and text for accessibility. Users can use it to visualize different color combination palettes for their website design that are in compliance with WCAG, EU directive, and ADA standards.
• Odd Contrast
• Pa11y
• Pika An open-source colour picker app for macOS. Pika (pronounced pi·kuh, like picker) is an easy to use, open-source, native colour picker for macOS. Pika makes it simple to quickly find colours onscreen, in the format you need, so you can get on with being a speedy, successful designer.
• Sim Daltonism
  Sim Daltonism is a vision deficiency simulator for the Mac OS X. The tool allows you to simulate one of the eight supported color blindness conditions such as Monochromacy and Protanopia (a dichromat condition). Please note that Sim Daltonism requires Mac OS X 10.2.8 (or later versions).
• Tanaguru contrast finder
• The Contrast Triangle Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint – or what I call “The Contrast Triangle”. Your text, links and background colors must now all have sufficient contrast from each other. Links must have a contrast ratio of 3:1 from their surrounding text. This is so that colorblind users can tell what pieces of text are links. By not using underlines, a design has to rely on contrast alone to achieve this. Even the default blue link color in browsers doesn’t meet this contrast level. Both the text and links have to have a contrast ratio of 4.5:1, or 3:1 if it’s large scale text.
• WCAG Color Contrast Checker | Accessible Web :  This Color Contrast Checker tool utilizes the same rulesets as Accessible Web’s Chrome extension but doesn’t require adding anything to Chrome. To test whether your color scheme conforms with WCAG color contrast guidelines, just enter your color combinations or use the dropper tool to select colors off a webpage.
• WCAG Contrast checker : Firefox plugin
• WebAIM Link contrast checker : Checks contrast of links
• WebAIM: Color Contrast Checker An online color Contrast analyzer from WebAIM.
• Whocanuse.com? It’s a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

Conclusion

When there are so many tools to tell us the contrast ratio of our contents and user interface components, let’s not dissipate the need for an inclusive visual real-estate for our diverse user groups! Rather, let’s build a colorful but contrastive web!

More Articles On Color Contrast

More Accessibility Tools