Backdrop color
Only certain colours of D-system palette are available to be used as background colours. This limitation is in place to ensure D-system meets accessibility standards in terms of colour contrast.
Light backdrop colors for texts and links
Dark backdrop colors for texts and links
For more see Library tab for a list of colours you can use as backgrounds, the text colour you should use against them as well as the link color.
For more see Library tab for a list of colours you can use as backgrounds, the text colour you should use against them as well as the link color.
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Accessibility
Using various forms of contrast is the most important consideration when making user-friendly color and interface choices. Awareness of standards and best practices is the key to accessible color selections.
Contrast ratios
Contrast is the difference in brightness between any two elements. The Web Content Acessibility Guidelines (WCAG) set specific ratios that achieve the minimum required contrast for legibility.
Generally speaking, small text is any size below 24px and requires a 4.5:1 contrast ratio.
Large text is anything above 24px and requires a 3:1 contrast ratio.
Graphical elements, such as data visualizations, also require a 3:1 contrast ratio.
All borders need a contrast ratio of at least 3.0:1 against their backgrounds. This includes borders on actionable elements like text inputs, radio buttons, and checkboxes.
Useful resources:
Check the color contrast of your borders and learn more about best practices with these excellent color contrast tools:
Color Contrast Analyzer (Chrome Extension)
TPG’s Color Contrast Analyser
tanaguru contrast finder
WebAIM’s Contrast Checker
Colorable
A11y project reference:
Check the contrast of borders for input elements
WCAG reference:
1.4.3 Contrast (Minimum)
Icons need a contrast ratio of at least 3.0:1 against background colors.
Text should have sufficient contrast against its background to be readable.
Level AA compliance requires a contrast ratio of:
3:1 for large text (>18pt normal, >14pt bold)
4.5:1 for body text (<18pt normal, <14pt bold)
Text that overlaps images or videos needs sufficient contrast against the background to be fully legible. Images and videos with busy backgrounds make text difficult to read.
Make sure text on images and videos have a minimum contrast of:
3:1 for large text (>18pt normal, >14pt bold)
4.5:1 for body text (<18pt normal, <14pt bold)If needed, add an overlay on your image or video to increase the readability and contrast between elements.
Please see the Library tab for more
