3R - Specificity A11Y

CSS Specificity

CSS Specificity defines the rules by which your browser will honor and prioritize which styles are applied to an element, using the selector outlined in the CSS. A base 10 number can be derived by assigning a score to the selector categories of Inline, ID, Class/Pseudo-class/Attribute, Type/Pseudo-element.

Contrast Ratios

A contrast ratio is the ratio of the brightest color to the darkest color within a visual system.

Meeting Contrast Ratios

It is important to meet contrast ratios to improve readability (and thus usability) of your site. It is also important to consider higher contrast visual elements are easier to read on a variety of devices, and for a larger audience. In some cases you are mandated by law to meet these requirements for accessibility reasons.

Web Accessibility Initative

The W3C WAI brings together people from industry, disability organizations, government and research labs to develop guidelines and resources to help make the web more accessible.

Summary

CSS specificity is the tool you will use to determine which style will receive priority in your style sheet.

The contrast ratio between elements on your page should meet certain thresholds to guarantee that your site is legible in a wide variety of circumstances, for a wide variety of people, while still being visually appealing.