People with limited vision need content to have enough contrast to read it. This means that the background colour and the colour of the text need to be clear and contrasting in order for it to be accessible for everyone.
A great tool to use is: https://toolness.github.io/accessible-color-matrix/ - This helps you to build your colour palette in an accessible way. Simply edit the palette to include the colours you want and it will create a grid of the accessible combinations that you can use, and also show you which combinations not to use, as those colours combined aren't contrasting enough to be legible for people with limited vision.
This link: http://webaim.org/resources/contrastchecker/ - Also tells you whether certain colour combinations pass or fail the contrast requirements needed to make your content accessible.
When to use:
- Colour contrast requirements only apply to text and graphics that are essential for understanding the content or functionality.
- You don’t need to meet any colour contrast requirements for logos or incidental graphic elements - e.g. an emoji
- Text that is part of a logo does not need to meet contrast requirements either.
Tips:
- Try not to use pure black text on a pure white background. Try to temper the colours slightly. Pure black on white gives a stark contrast which can cause text to be blurred or move about for some people
- If you want to put text over an image, simply add a solid background behind the text to a dark overlay to the image to make it more accessible.
- Don’t use colour alone to convey meaning - use icons, written content, and other visual elements to reinforce clear communication of content - e.g. someone may be red-green