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

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

LRS Conformance Testing tools and More

2019-09-13

ADL Git Hub - LRS Conformance test and more!

Paul Schneider

Set a background (fill) color on an element

2019-10-29

Steps to set a background (fill) color on an element.

Setting a background color can be used for many visual effects.

In this example, we have a text element over an image and it's difficult to read the text.

We can add a background or fill color to help the text stand out more.

Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.

24 seconds 6 steps