Color Tools

Careful use of contrast and color is vital to accessibility. Try some of these tools to help you make design decisions that enable users, including users with visual disabilities, to perceive the content on your web page.

UChicago color system

If designing within The University of Chicago color system, there are two grids of colors that can help. Note: Due to rounding, the color grids list the Maroon (#800000) and Greystone (#A6A6A6) combination as compliant for small text, even though it is technically noncompliant.

• Contrast Grid of UChicago color combinations shows all combinations of text against a background, whether they are compliant or not, so you need to keep contrast principles in mind:
  • Do not use a color combination for small text if the ratio is smaller than 4.5.
  • Do not use a color combination for large text or non-text components if the ratio is less than 3:1.
• Eightshapes contrast grid of accessible UChicago color combinations shows only compliant combinations.

Contrast checkers

• Contrast Checker by WebAIM
  • Color choices: hex values, color charts, and sliders
• Link Contrast Checker by WebAIM
  • Very similar to the WebAIM contrast checker but includes checking link color, text color, and background color
• Contrast Checker by Acart Communications
  • Color choices: hex or RGB values, color wheel slider, colors from your uploaded image
  • Creates a history of tested color combinations; can save as a PDF
  • Can share results, view grayscale
• Color Contrast Checker by Siteimprove
  • Color choices: hex or RGB values, color chart and slider
• Color Contrast Analyzer by Deque
  • Color choices: hex or RGB values, color charts, color names, and sliders
• Colour Contrast Checker
  • Contrast checker with hex values and HSL sliders
  • Chrome extension available with built-in eyedropper tool

Other designer and developer color tools

• Digital Color Meter for MacOS by Apple
  • Built-in utility measures the value of any color on your screen using RGB and other options
  • Ability to lock in the aperture location so the color value can be copied to a contrast checking tool (refer to Apple instructions)
• ColorZilla by iosart labs
  • Analyzes a page, enabling you to inspect a palette of its colors
  • Includes a color picker, eye dropper, gradient generator, and more
  • For Firefox or Chrome
• Color Blind Filter by Toptal
  • Shows what your page looks like to a person with color blindness
  • Displays your page and its simulation side-by-side