Color Contrast and Visual Impairment Tools

These tools help with understanding problems with color blindess and contrast and preventing these problems with your content.

Here is a good primary on accessiblity and colors from a US Government site: US Web Design Systems - Using Color

Coblis — Color Blindness Simulator
Color Oracle: Free color blindness simulator for Windows, Mac and Linux
Colour Contras Analyser: Determine legibility of text and contrast of visual elements.
ColorSafe: Get suggestions for similar colors with sufficient contrast
WebAim Contrast Checker: Web based contrast checker
WebAim Link Contrast Checker: Checks for link color against body and background
WebAxe Color Contrast List: List of several color contrast tools

0 0

Similar Projects

WCAG: Cognitive tools

2021-02-02

Writing in clear concise language is key

1 min read

Paul Schneider

Screen Readers: Tools and understanding them

2021-02-02

Screen Reader options and Tips

1 min read

Paul Schneider

Color and Accessibility

2019-06-07

.Gov site with great resources regarding color and accessibility

1 min read

Brent Schlenker

Auditory Tools

2021-02-02

Creating Closed Captions

1 min read

Paul Schneider

Pantone 2020 Color of the Year

2019-12-05

Classic Blue #0f4c81

1 min read

Brent Schlenker

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

2019-08-31

This is a very useful site for quickly finding the Hex Code value for colors. They also organize the site based on popular color pallets as well. You just click the color you like and the hex code copies to your clip board and then you paste it where ever you need it. Easy.

Brent Schlenker

Graphics and Animation for Accessibility

2020-09-17

Some tips and ideas for handling graphics for WCAG content

1 min read

Paul Schneider

Working with inline text styling in Claro and Flow

2021-06-11

Inline Styling can help you add emphasis or visual design to text

2 min read

Chris Van Wingerden

SVG Graphics: Tips and Sizing

2020-04-17

SVG Graphics are great in general because they are both dynamic and also very small. This means you can have a large image "visually" yet the actual size in bytes will be quite small. Much smaller than any other image type. Also, as they are vector based, you can increase the size visually and you won't get that "stretched" and "pixelated" look and feel.

1 min read

Paul Schneider

How to Create Engaging eLearning Through Visual Design with Tim Slade- IDIODC Ep #146

2021-04-28

In this episode you'll learn how to use visual communications to create engaging learning experiences. You'll explore how to use visual communication techniques to visualize your learning content and help your learners see what you're saying. Best of all, this episode will focus on tips anyone can use, regardless of their current art or graphic design skills.

1 min read