Web Accessibility: Color and Typography

Last updated: February 13, 2018

Note:  All links going to other websites will open in the same window. Use the Back button to return to our site.

  • Accessibility Color Wheel Version 1.0 by Giacomo Mazzocato. When you hover over the color wheel, you’ll see text in colors for normal, Deuteranopia, Protanopia and Tritanopia color vision simultaneously. An "OK" message is displayed when you hover over an accessible color. By clicking on the color, you can copy the hex values. The tool may be used for foreground and background color contrasts. You may download the javascript if you want to use it offline.
  • As Seen by the Color Blind shows you what those with color blindness are seeing.
  • Check My Colors Check the accessibility of the colors on your website by Giovanni Scala.  New
  • Colour Combinations Tester for Web Developers  New
  • Compare Six Color Samples Tool  New
  • "Color Contrast for Better Readability" by Tom Osborne, VP, Design, Viget Labs, LLC.  New
  • Colorable a color palette combination contrast tester.  New
  • Colour Contrast Check by Jonathan Snook.  New
  • Color Contrast Tester by Joe Dolson.  New
  • Color Deficient Vision Simulation in the Web Designer's Color Card and Chart, by Christine Rigden, formerly of British Telecommunications (BT).
  • Color Safe Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios. By Donielle Berg & Adrian Rapp  New
  • "‘The Eye of the Beholder’—Designing for Colour-Blind Users", (.pdf) by Christine Rigden, British Telecommunications Engineering, Vol. 17, Jan. 1999
  • Color Blindness Types provides definitions and examples of type of color blindness. PDF format (.pdf)
  • Colorblind Web Page Filter Enter the URL resource to be viewed, and a color filter to be applied to that resource. If you only use one filter, use the grayscale filter which will not only point out potential problem areas, but will also let you see more clearly which areas the filter is unable to process.
  • Colblindor is all about color vision deficiency. It presents all you ever wanted to know, learn and try out concerning color blindness. Please feel free to browse the site and find online color blindness tests, some tools to check color names or many interesting facts.
  • Colour Contrast Analyser [From the Paciello Group.]
  • Color Contrast Checker from WebAIM provides the ability to lighten and darken your color combinations slightly to find acceptable contrast levels.
  • Color Contrast Analyzer: The Luminosity Colour Contrast Ratio Analyser allows you to check the contrast of two colors using the WCAG 2.0’s luminosity contrast algorithm.
  • Color Laboratory The color laboratory allows you to select colors and see how they appear next to one another and in various foreground / background combinations. It also allows you to see those colors as they might appear to color-blind users.
  • Color Oracle is a free color blindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
  • Colour Vision Easy to use tool to quickly see color deficiencies with color palettes for Protanomaly (low red), Protanopia (no red), Deuteranomaly (low green), Deutanopia (no green), Tritanomaly (low blue), Tritanopia (no blue), Typical Monochromatic, ATypical Monochromatic.
  • "Computer Color Matters -Is your computer color blind?" from Color Matters® Computers
  • Easy RGB Find similar colors in different collections.  New
  • Design Evaluation provides three ways to see what your Web site’s colors look like to the color-blind. You can test pages at this site.
  • Fonts excellent resource for information about fonts from Webaim
  • Lighthouse International: Effective Color Contrast – Designing for People with Partial Sight and Color Deficiencies offers color guidelines for the Web. (.pdf)
  • HTML Color  New
  • HTML Color Codes  New
     For example: Green Cyan https://html-color.codes/hex/006644
  • HTML Color Mixer tool that creates a range between two colors.  New
  • Lighthouse International: Making Text Legible – Designing for People with Partial Sight offers basic guidelines for making effective legibility choices that work for nearly everyone. (.pdf)
  • Vischeck Test your Web design for how it looks to various color blind impairments. Run Vischeck on your own image files or run Vischeck on a Web page: on your desktop or online.
  • Visibone Information about colour blindness, with colour cards simulating colour spectrums as they appear to those with colour deficient vision.
  • Web-Based Color Vision Test EnChroma Color Blindness Test. Results may vary depending on display quality. This test is not a medical diagnosis. By taking this test you understand and accept that your test results may be anonymously recorded on our server for quality assurance purposes. Please consult an eye care professional for more information regarding color vision deficiency.
  • Website Tips: Color provides several web-safe color charts by VisiBone’s Bob Stein, by Lynda Weinman, and Daxassist. There are also resources to many more charts, and articles and tips on color and design, color psychology and meanings.
  • Wellstyled Web-Safe Colors Tool incredibly helpful online color scheme tool to help select eye-stopping color schemes.