Goal
Ensure that the user can change the colors of the interface to meet their specific needs.
Why this matters
Some users need specific colors or color contrast settings in order to be able to read and understand the page. This may be due to visual or cognitive disabilities. If the website’s colors are set in the HTML (hopefully not, it’s 2020) or the text is embedded in an image (hopefully not, as that breaks 1.4.5 Images of Text – Level AA in most cases) then the user can’t use the site.
How to Implement
Designer
Guideline 1.4.8 Visual Presentation’s Quick Reference offers a number of techniques for ensuring the foreground and background colors can be selected by the user. Three of these techniques involve making a conscious decision not to set color values.
- Don’t set the foreground or background values in the main content area. (This may not result in a fully usable experience for the user.)
- Specify the border colors for content areas and the layout in CSS, but don’t specify background or foreground colors.
- Don’t specify any colors for anything.
By not setting color values you allow the browser to choose the values, and the user to override them using a personal style sheet. This requires you and your organization to let go of a lot of control over the experience, and frankly I can’t see anywhere I’ve worked doing it.
The other two options involve providing the user with the ability to change the colors.
- Provide instructions for how to override the provided colors in each major browser.
- Provide a color selection tool for the page for foreground and background colors.
These are much more likely to meet an organization’s desires to be brand-compliant and accessible in my experience, but they also require that your organization’s color palette is tokenized or otherwise organized enough that you can provide instructions for changing the colors and have them work.
See How to set up an accessible set of color tokens for your design system (not yet written) for more details.
Developer
Obviously, the decision made for how to handle this guideline greatly modifies what needs to be developed and tested, so use this only as a rough guideline.
Regardless of what method above is being used, you will need to:
- Ensure all text is added as part of the HTML markup, not as images.
- Ensure the text in the HTML is styled using CSS that is provided either in the head of the document or via an external stylesheet.
- Ensure you’re not using inline CSS to define colors because inline CSS is the hardest to override.
- Keep an eye out for CSS that adds content because those will need special handling.
Once your markup is clean, you can do one of the following depending on which technique for meeting this requirement was chosen in the Designer section:
- Remove declarations for colors from the appropriate parts of the site so that the user has full control.
- Provide a list of specific classes that the user needs to override so that whoever’s writing the instructions for overriding the CSS in the browser knows what classes to override.
- Build a user interface that allows the user to choose specific elements and change their colors on your website.
How to test
Like in the Developer section, how to test is greatly dependent on what decisions were made above, so use this only as a rough guideline.
If colors are being set to browser default
- Inspect any elements in the page that are supposed to be set to the default and ensure that there is no CSS overriding the browser defaults.
If the user is setting the values using instructions
- Use the instructions to confirm that the ability to change colors works as expected
If the user can change the colors using settings built into the website
- Test to ensure that all of the colors change in all of the expected places (and no unexpected places) throughout the interface.