Colour must not be the only thing used to tell different content apart. This ensures that people who are unable to see colours, or who have difficulty telling different colours apart, have some other way to do so.
Accessibility Requirements for 1.4.1 use of color (A)
- When rendered in monochrome, information does not disappear.
- Text identified by colour as having special meaning has another indicator – a visible border and label, underline or other visual effect.
- Information graphics and charts that use colour as a key also provide distinctive non-colour differences – hatching patterns or directly applied labels.Common mistakes
Common Mistakes for 1.4.1 Use of Color (A)
- A form uses only colour to indicate a required field.
- Colour-coding text or backgrounds to indicate essential content, pass/fail categorisation, etc.
- Links are only distinguished from plain text by colour and the colour may not vary from the main body text.
- Text alternatives that do not include information conveyed by colour differences in the original image.Useful resources
Techniques for 1.4.1 Use of Color (A)
Your site doesn’t include support for the Accordion Item block. You can try installing the block, convert it to a Custom HTML block, or remove it entirely.
Common Failures for 1.4.1 Use of Color (A)
The following are common mistakes that are considered failures of Success Criterion 1.4.1 by the WCAG Working Group.
- F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
- F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
- F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only
FAQs about Use of Color
Best practice, how do you use color to convey information?
1.If color is needed to convey meaning, ensure there is a text alternative for that meaning as well.
2.Non-text elements need a 3:1 color contrast ratio with the background, and/or with surrounding non-text elements.
What is color alone?
If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information.
What is the use of Color 1 and Color 2?
Color 1 is your primary color, color 2 is your secondary color. Your primary color is with which you draw when you use your left mouse button, the secondary is the one with which you draw when you use your right mouse button.
How to ensure use of color is successful?
1.Ensure no instructions rely on color alone
2.Ensure that no information (like charts and graphs) relies on color alone