CSS Specificity

Specificity determines which style declaration is ultimately applied to an element. CSS rules with the highest specificity score will win. The specificty score is calculated based on the number of selectors in each category(ID, CLASS, TYPE) in the selector matching the element/pseudo-element. Once the specificity values of the selectors are determined, the number of selector components are compared.

Contrast ratios

Contrast ratio determines the contrast of the text and its background color on a web page so that it is perceivable for users. We can use a tool called Contrast ratio or we can select the text on the page, right click "Inspect" and in the developer tools CSS column find the text color, left click on it and find the contrast ratio there. The best contrast ratio would be 7 and a minimum is 4.5.

Why do we need to meet contrast ratios?

A good contrast ratio can make text more readable for everyone. Moreover, it is important for people with vision problems or reading text in a sunlight. Not forget to mention, it is a law to meet the minimum contrast ratio.

Who sets W3C accessibility rules?

The Web Accessibility Initiative (WAI) Interest Group (IG) promotes awareness and engagement in accessibility throughout the W3C.

Summary of the documentation

In conclusion, I need to mention why the order of link pseudo classes must follow LVHFA. :link and :visited come first so the initial styling is seen and if the link was previously clicked applies :visited declarations. Then goes :hover and :focus so now they override and apply to both visited and unvisited links. The:active should always come last to indicate links that have beed activated.