Contrast and color are important for accessibility. Users, including users with visual impairments, must be able to perceive content on the page.
Testing color contrast
WebAIM offers an online contrast checker that will present the contrast difference between two colors, and it will help you find a color that meets contrast standards.
Make sure the ratio is 4.5:1 or greater.
Enter Hex color values in the Foreground Color and Background Color fields. You can also select the color box next to each field to select a color using the color option window. The tool will display the contrast ratio and show if you "Pass" or "Fail" the requirements for all types of text.
If your text color fails, use the Lightness sliders to identify an acceptable color scheme. Adjust the body text or background until you pass.
Don't use color alone to convey meaning
As we have discussed previously, the purpose of screen readers is to read content aloud to users with visual impairments. It is important to know screen readers do not read aloud visual information. Therefore, the screen reader does not read color information.
Non-visual and visual users who cannot access color must be taken into account when using color to emphasize elements. Information conveyed with color must also be communicated textually to be effective. This can include plain text, identifiers or patterns and textures with color.
Using text with color
When color is used to instruct a user to take an action, a textual alternative must be provided. For instance, "Select the green button to advance to the next chapter," is not accessible because not every user can see the color green. Rather, the instructions should read, "Select the green Start button to advance to the next chapter."
Below is an example of accessible buttons including color and text.