Text and color contrast
To ensure legibility for those with visual impairment:
- Use our type pairing primitives, which have been designed for legibility. Do not re-scale text sizes.
- Always ensure that all text has a minimum contrast ratio of WCAG AA.
- Never use only color to convey meaning.
- With all copy, work with a restricted palette. Use neutrals and accents to achieve high contrast combos.
Our text and visuals are distinctly separated in our layout system, often divided by a solid GitHub green line. By overlaying text on these neutral backgrounds, we can ensure the text remains readable without competing with imagery. It also allows visuals to be expressive without compromising legibility.
Charts and diagrams
Our charts and graphs should build trust. Attention to detail, legibility of text, and accessibility are the main priority. This is not the place for illustrations, gradients or adjacent color.
- Use clear labels and sufficient text size
- Don’t rely solely on color to distinguish data series
- Provide alternative text descriptions for complex visualizations
eBooks and whitepapers
When creating eBooks, whitepapers, and other documents:
- Tag PDFs properly for screen reader accessibility
- Use heading hierarchy correctly
- Ensure all images have appropriate alt text
- Maintain readable text sizes and line lengths