CSS Specificity
Specificity is a rule in CSS to resolve which element the styling gets applied to, there is an algorithm that determines which style is ranked higher or lower and then chooses the style with the highest specificity.
Specificity is determined by four types of selectors and each one adds to the total value. There are Inline styles, ID selectors, Class selectors, and then Element and pseudo-element selectors.
- Each ID value (0,1,0,0)
- Inline styles count (1,0,0,0)
- Each class, pseudo-class, and attribute (0,0,1,0)
- Each element and pseudo-element (0,0,0,1)
When two rules apply to the same element, the one with the higher specificity wins. If the specificity is the same, the style at the bottom in the CSS is applied. This means that with CSS it starts at the top and ends at the bottom, because of this the bottom CSS style will be considered the latest.
Contrast Ratios
Contrast Ratio is measured from the color of a text against its background, white text on a white background will have a contrast ratio of 1 and black text on a white background will have a ratio of 21. We want to strive for as high as possible while apple recommends a minimum of 4.5 but prefers 7. Normal text and images should have a contrast ratio of at least 4.5:1. Large text should have a contrast ratio of at least 3:1. This is defined by the WCAG to be font sized larger than 18pt or bold 14pt font. Decorative text or images, these aspects that are not visible or contain other visual content do not require contrasting colors. Logotypes are any text that is a part of a logo, these do not have a contrast requirement.
Why You Must Meet Contrast Ratios
Color contrast is important because text and background colors can determine how people interact with the content that is written in those colors. Low contrast colors make it difficult to read when text contrasts poorly with background colors, while high-contrast colors are easier to read when paired together. Some users may have color deficiency which means that they will have a hard time distinguishing between the different shades of yellow, red, and green. This means that they may only be able to tell there is a difference in color and perceive text if it has high contrast.
Who Sets Accessibility Rules
The World Wide Web Consortium published the Web Content Accessibility Guidelines (WCAG) which create the standards and guidelines on accessibility. They ensure that the web supports people with disabilities, this means to ensure those with a wide range of impairments such as visual, auditory, physical, speech, cognitive, and neurological disabilities are able to use the web the same as those without impairments.
Summary
Specificity is used by CSS in order to determine which style to be used so that when something takes place on page there is no guess as to what style will be used. This creates a set of guidelines that help developers build a universal experience for everyone to browse without the fear of an impairment limiting those users, this means no one is left out.