Last time we talked about accessible tables. It was a long and complicated topic. Fortunately Contrast will be much simpler. It isn’t that this isn’t a complicated topic with a lot of nuance; however, for the sake of content creation the scope for this will be a very narrow slice.
Contrast mostly affects users with low vision and color blindness. However, like other elements, poor contrast can have a negative effect on almost all users. Try reading on a device outside on a sunny day. Low contrast will make that a difficult to impossible task.
The only users likely unaffected by contrast issues are ironically people using screen readers. Since the screen reader doesn’t see design, they don’t see contrast. A screen reader can read black on black or white on white text just fine. However all other users would not realize the text exists unless they highlight it.
The great thing about the block editor is that it will help you with contrast issues.
For example, this text is low contrast against the background. When I click on it in the editor and look at the color controls it shows a warning. This warning showed up when I set the colors initially. This means when you use these color controls you can watch for issues.
Fixing contrast issues
If the low contrast warning shows up, it is important to fix it. To select a different color follow these steps:
- Click on the block and verify the low contrast warning is present
- Use the color controls to select different text or background colors
- Find a combination of text color and background that clears the warning and appeals to the design
Finding alternate colors
There are also some helpful resources like this Contrast Finder that can be used to find alternate colors. This resource includes some information on how to use the tool. As a quick demo I’ll use the default values which are:
- Text color: rgb(70,136,71)
- Background color: #DFF0D8
- Minimum ratio: 4.5
- Color to edit: Edit the text color
- Gimme: valid colors and very close to the original color
After clicking “Find Valid Colors” it will reload the page with colors that pass the contrast ratio selected and should be close to the original color. In some cases it won’t be able to find usable colors so try editing the selected value for “Color to edit” and “Gimme.”
Next time the topic will be good links.
