CSS Specificity

CSS specificity is a value that is used by the browser to determine the most relevant rulesets to apply to certain elements. There is a way to calculate the weight of these elements, those involving any inclusions of ID, CLASS, and TYPE. These are individual numbers that are then combined together to get a specificity score. The CSS rule with the highest specificity score will always be applied to the listed elements, regardless of the placement of the CSS rule or any lower specificity overrides. The one exception is when '!important' is used, to where that will always take precedent over anything else.

Contrast Ratios

A contrast ratio is the difference between the color of text, and the color of the background element the text is on. The higher the number, the better contrast between the two elements, therefore the element will be easier to read.

Why meet Contrast Ratios?

Due to accessibility guidelines, most if not all websites are required to have constrast ratios around 4.5 or 7 based on the element in question. Failure to meet this number can result in lawsuits and fines due to a lack of support for accessibility.

Who sets Accessibility Rules?

The organization that sets the Web Content Accessibility Guidelines, or WCAG, is the World Wide Web Consortium (W3C). These guidelines are the international standards for any organization on the internet.

Summary

CSS specificity is the order in which CSS rules will be applied to certain elements, which all depend on how they are called in CSS. Those that use an ID instead of a CLASS or a TYPE will be prioritized. Contrast ratios are the difference between any text element and the accompanying background element. There are guidelines stated by the W3C that specificy that a certain ratio must be met or the website could be in trouble for not supporting accessibility.