Specificity-A11Y

CSS Specificity

CSS specificity is an algorithm that determines which declaration is considered most important to an element. The importance is represented by a number. The greater the number, the greater the importance. The specificity number of an element is found by counting how many ID, class, and type selectors the element has. The number of ID selectors is the first digit of the specificity number. The number of class selectors is the second digit, and the number of type selectors is the third. The link pseudoclasses must be in the LVHFA order because the link is unvisited before it's visited and the link is hovered over before it is clicked (active).

Contrast Ratios

The contrast ratio is the ratio of contrast between the text and the background. The contrast ratio can be found in the browser developer tools by clicking on the color icon of the text in the CSS stylesheet.

Why Contrast Ratios Must be Met

Contrast ratios must be met to follow accessibility rules and laws.

W3C Accessibility Rules Group

The W3C Web Accessibility Initiative (WAI) sets accessibility rules.

Summary

The CSS specificity of an element is determined by the number of ID, class, and type selectors the element has. The link pseudoclasses are listed in the LVHFA order because that is the sequence followed when clicking links. The contrast ratio is determined by the contrast between the text and the background. The contrast must meet certain ratio rules. The group that sets accessibility rules is the W3C Web Accessibility Initiative (WAI).