This page contains all guidelines tagged with:
Colour Contrast
Colour contrast is the difference in brightness between foreground and background colours. Text and graphical elements on a web page need good contrast so that it is perceivable for users.
28 Resources: People (0); Podcasts (0); Organisations (0); Tools (8) Articles (20)
People
Podcasts
Organisations
Tools
Axe DevTools
The world's leading digital accessibility toolkit
Chartability
Chartability is a set of testable questions for ensuring that data visualisations, systems, and interfaces are accessible. Chartability is organised into principles with testable criteria and focused on creating an outcome that is an inclusive data experience for people with disabilities.
CMYK Colour Contrast Calculator
A tool for testing accessible colour combinations in print. This is useful for exhibition design.
Colour Contrast Checker
A colour contrast analyser that will give you suggestions and recommendations that are accessible if ratios are not met.
Text on background image a11y check
This is a guide to foreground colour accessibility on a background image. It is intended as guide for designers and developers to test if their design solution is accessible. Change the text size, colour and position. It will check the dimensions of the textarea against the background image.
Web Disability Simulator
Lets you experience how people with different disabilities perceive a website. Simulate colour blindness, low vision, dyslexia and more. An easy-to-use tool both to increase understanding and lower the threshold to test accessibility on a website.
WebAIM: Link Contrast Checker
Use this tool to check that there is enough contrast between link text, regular text, and the background colour.
Who can use this colour combination?
A tool that brings attention and understanding to how colour contrast can affect different people with visual impairments.
Articles
“An accessible website won’t be beautiful”… really?!
Fortunately, accessibility has been discussed a lot lately, but evidently, some biases and myths are still to be debunked.
Quick and Small Accessibility
Learn something new about accessibility with short and solid posts (less than 150 words).
Chasing rainbows
Andy Baio takes a shot at visualising what is like to live with colourblindness
An interactive guide to colour & contrast
A comprehensive guide for exploring and learning about the theory, science, and perception of colour and contrast.
Creating an Inclusive eCommerce Experience: Best Practices
Discover best practices for creating an inclusive eCommerce experience. Learn how to optimise your website for accessibility and expand your reach.
Designing Accessible Data Visualisations
10 dos and don’ts to keep in mind when designing accessible data visualisations
Designing Accessible Text Over Images: Best Practices, Techniques, And Resources
Best practices when using various accessible text over images techniques for designing your web and mobile app content. These practices can help you to make the text over images more accessible while retaining an aesthetically pleasing look.
Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 2)
In Part 2 of the series, Hannah Milan reviews in detail various accessible text over images techniques for designing your web and mobile app content, including framing the image, soft-colored gradients technique, text styles and text position, solid color shapes, and use of colored backgrounds
How Accessibility Standards Can Empower Better Chart Visual Design
Accessibility for data visualisation extends well beyond web standards, at least if you’re trying to create an experience that’s actually useful. This article focuses on WCAG 2.1 standards, and it covers many techniques for embracing accessibility standards to empower better, more accessible visual design.
How captions increase ROI and audience for media creators
High quality captions and transcripts are good for business and a necessity for millions of people. Auto captions are not the best accessibility practice. Learn firsthand from a deaf speaker in the 8-minute video.
How to make charts and graphs more accessible
In this article, we’ll start with what charts and graphs need to be considered accessible. But, just because it’s accessible, doesn’t mean it’s the best user experience for all types of users. So, we’ll also go over opportunities for creating more usable data visualisations.
How to make interactive charts accessible
Interactive charts can transform data into compelling stories, offering valuable insights at a glance. But what happens when these visual tools are inaccessible to those with visual impairments? In this post, we’ll show you how to ensure your interactive charts are accessible to all users, regardless of their abilities.
Inclusive Design Principles
These Inclusive Design Principles are about putting people first. They are intended to give anyone involved in the design and development of websites a broad approach to inclusive design
Introducing accessibility in typography
Making text accessible should be part of everyday practice. However, general typographic practices of optimising legibility and readability don’t necessarily go all the way towards making text accessible.
Neurodiversity Design System
Standards and principles that combine neurodiversity and user experience design for Learning Management Systems.
The importance of adding accessibility design reviews to the design process
To create accessible and inclusive experiences, you need to pay attention to accessibility throughout your design process, not just at the end.
The Potentially Dangerous Non-Accessibility Of Cookie Notices
Cookie notices have the potential to violate web accessibility laws. In this piece, a WCAG auditor shares some cookie banner error patterns that can massively hurt a page’s overall conformance.
The Ultimate Checklist for Accessible Data Visualisations
Are your data visualisations leaving some users behind? Learn essential design principles to create accessible charts for all.
Typography in Inclusive Design Part 1: 8 key tips for accessible typography
8 key tips for accessible typography
Visually Accessible Data Visualisation
Designing data visualisation to be more visually accessible using patterns, shapes, and high contrast colours