CSS Specificity
Specificity is a set of rules to resolve conflicts when multiple CSS rules apply to an element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.
Specificity is calculated by types of selectors. This is Inline styles, ID selectors, Class selectors, and then Element and pseudo-element selectors. There is a four part value.
- Inline styles count as (1,0,0,0)
- Each ID value as (0,1,0,0)
- Each class, attribute, and pseudo-class as (0,0,1,0)
- Each element and pseudo-element as (0,0,0,1)
When two rules conflict, the one with the higher specificity wins. If specificity is the same, the latest rule in the CSS is applied due to the cascading nature of CSS.
Contrast Ratios
Contrast ratios represent the difference in brightness between two colors. This provides a measure of how easy it is to distinguish text or other visual elements from their background. There are two success criteria. Minimum is AA. Which is a contrast ratio of at least 4.5:1 and heading text should have a ratio of at least 3:1. Enhanced contrast is AAA, this builds off of AA. Text and its background should have a contrast ratio of at least 7:1. Heading text should have a tratio of at least 4.5:1.
Why You Must Meet Contrast Ratios
Meeting contrast ratios is essential for making web content accessible to users with visual impairments, ensuring everyone can see the content effectively. Beyond that you need to be in compliance with web standards as well as there being an ethical reason to ensure the web is accessible to as many people as possible. You don't want to be sued.
Who Sets Accessibility Rules
The group within the W3C (World Wid Web Consortium) that sets accessibility rules is the WAI (Web Accessibility Initiative) They work to ensure that the web supports people with disabilities, this goes with a wide range of impairments such as visual, auditory, physical, speech, cognitive, and neurological disabilities. WAI develops guidelines regarded as the international standard for web accessibility. The most well know is WCAG (Web Content Accessibility Guidelines). Theres also ATAG (Authoring Tool Accessibility Guidelines) and UAAG (User Agent Accessibility Guidelines).
Summary
CSS specificity is just a rulebook for deciding which styles show up on a website when there's a clash between different styles, ranking them from most important to least. Making sure text and background colors have good contrast is important so everyone can read the content easily. This is part of a bigger set of rules called WCAG, made by W3C, which is all about making sure websites are usable for as many people as possible. These rules help make the internet a friendlier place for everyone, no matter how they see or interact with the web.