Foundamentals

A good colour system should be:

• Accessible
• Systematic
• Scalable

1 - Accessibility

Web Content Accessibility Guidelines (WCAG) 2.0 help make the web more accessible to people with disabilities. Accessibility addresses a wide range of disabilities; visual, auditory, physical, cognitive, and more.

Section 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA).

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Example of a shade that passes WCAG’s (Level AA) for use both over white or black backgrounds.

2 - Systematic Approach