Color Contrast

Color contrast is the difference in brightness between the colors used for foreground and background content. Its applications scope is very wide and includes web pages, desktop and mobile applications, and even texts printed on paper!

With regards to accessibility, ensuring an adequate color contrast is critical, as it makes the content much more readable; this helps people with visual impairments, as well as people with cognitive disabilities. Therefore, depending on the usage scenario, different guidelines to establish which color contrast are available; in this section you can find references to them, as well as pointer to useful tools in order to verify the color contrast in your products.

Resources

Showing results 37 to 48, out of 60.

Accessible Colors

Vincenzo Rubano
·

This minimal, easy to use web service allows you to quickly test wether the contrast ratio between two colors (foreground and background) is enough for your text to be accessible.

Read more

WebAIM Contrast Checker

Vincenzo Rubano
·

This service provided by WebAIM (the same company behind the Web Accessibility Evaluation Tool (WAVE)) allows you to quickly check the contrast ratio between foreground and background colors.

Read more

WebAIM Link Contrast Checker

Vincenzo Rubano
·

For better usability and accessibility, links should be underlined by default. Otherwise, according to Web Content Accessibility Guidelines (WCAG) link text must have at least a 3:1 contrast ratio with the surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus.

Read more

ColorZilla

Vincenzo Rubano
·

Available for both Mozilla Firefox and google Chrome, ColorZilla is an extension that can make your life easier while testing and evaluating color contrast in your web page, or choose the right color during the design process.

Read more

Create Accessible Experiences for Watch OS (WWDC 2021)

Vincenzo Rubano
·

In this video from Apple World Wide Developer Conference (WWDC) 2021 you can find out how you can offer a great accessibility experience for watchOS by supporting features like larger text sizes, VoiceOver, and AssistiveTouch.

Read more

The Details of Ui Typography (WWDC 2020)

Vincenzo Rubano
·

In this video from Apple World Wide Developer Conference (WWDC) 2020 you can learn how to achieve exceptional typography in your app’s user interface while enhancing legibility, accessibility, and consistency across Apple platforms.

Read more

Make Your App Visually Accessible (WWDC 2020)

Vincenzo Rubano
·

In this video from Apple World Wide Developer conference (WWDC) 2020, you will discover how to create an adaptive interface for your iOS app that takes a thoughtful approach to color, provides readable text, and accommodates other visual settings to provide a great experience.

Read more

Visual Design and Accessibility (WWDC 2019)

Vincenzo Rubano
·

In this video from Apple World Wide Developer Conference (WWDC) 2019 you can learn about a few critical concepts that are important to make your app accessible for people with vision disorders.

Read more

Accessibility Inspector (WWDC 2019)

Vincenzo Rubano
·

Quoting Apple, “the Accessibility Inspector enables you to identify parts of your app that are not accessible. It provides feedback on how you can make them accessible, as well as simulating voice-over to help you identify what a Voice Over user would experience”.

Read more

How to Meet WCAG 2.1 (Quick Reference)

Vincenzo Rubano
·

In this interactive resources provided by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) you can view Web Content Accessibility Guidelines (WCAG) 2.1, principles, success criteria, techniques for satisfying them, and examples of common failures.

Read more

Lighthouse

Vincenzo Rubano
·

Primarily developed at Google, Lighthouse is a tool that provides “Automated auditing, performance metrics, and best practices for the web”. The available audits include a comprehensive, detailed accessibility report that can be generated for any web page.

Read more