According to MDN Web Docs, "Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element." Inline styling has the highest specificity (unless the !important flag is used, though this is considered bad practice) and a weight of 1-0-0-0, followed by ID selectors with a weight of 0-1-0-0 for each selector, class selectors with a weight of 0-0-1-0 for each selector, and individual element selectors with a weight of 0-0-0-1 for each selector. Styling applied to an ID will override styling applied to classes and elements, styling applied to a class will override styling applied to an element, and individual element styling has the lowest level of specificity. The highest 4 digit number when read in base 10 notation has the highest weight and takes precedence over other style rules (for example, inline styling has a weight of 1000 and so has the highest weight and precedence).
Specificity is taken into consideration after the normal flow of the selectors has already been applied. This means that if multiple selectors of the same weight are present in a CSS stylesheet, the last rule has precedent over the previous. For this reason, link state pseudo-classes must always be written in the order: Link, Visited, Hover, Focus, Active. If they are not in this order in the CSS rules, whichever rule is written last will overpower whatever rules are written before, as all link pseudo-class styling have the same specificity weight. The reason they appear in this order is because Link styling only applies until the link has been clicked, at which point the Visited styling applies until the cache is cleared. Hover does not override Visited, as the link remains un-clicked when Hover is in effect. The same applies for Focus, and Active only applies when the link is actively being clicked. If, for instance, the Visited styling were applied last, then Hover, Focus, and Active would have no effect, as the browser would treat Visited as the predominant style rule.
According to Siege Media, "Contrast ratio is the difference between the maximum and minimum brightness of a computer display." Contrast ratio falls on a range from 1 to 21. The higher the contrast ratio, the greater the readability of text. For example, the most common contrast web users are likely familiar with is black text (#000) on a white screen (#fff) (or vice versa), which gives a contrast ratio of 21. If the background remains white but the text is changed to gray (#808080, halfway between black and white), the contrast drops to 3.94. This is still readable for large text, but is not ideal for small text.
Contrast ratio can be calculated by first finding a color's relative luminance, which is "the relative brightness of any point in a colorspace, normalized to 0 for blackest black and 1 for lightest white," according to the Web Content Accessibility Guidelines (WCAG) 2.0; the WCAG provides formulas to determine the relative luminance of any given color through its RGB values. The formula to calculate the contrast ratio of two colors (L1 being the lighter color, and L2 being the darker color) is (L1 + 0.05) / (L2 = 0.05). Thankfully, there are a range of color contrast checkers that can be used to determine contrast ratios without having to calculate them every time. Browser's developer tools can also aid in checking contrast ratios. In Google Chrome, the contrast ratio can be checked by right-clicking a link and selecting Inspect, then clicking the color under the selected CSS link style rules (Link if un-clicked, Visited if clicked). Just below the Hex/RGB/HSL code is a Contrast Ratio box which will display a check if the contrast ratio is higher than 4.5 and a "prohibited" symbol if it is below. Mozilla Firefox has an Accessibility tab in their developer tools which allows contrast ratios to be checked in the browser as well.
Minimum contrast ratios are not only important for general readability, they are also required by the WCAG for accessibility purposes. While low contrast text may be difficult to read for users in general, users with visual impairments such as low vision, color blindness, glaucoma, etc. will have even greater difficulty deciphering certain color combinations, if they are even able to read them at all. The WCAG sets the minimum acceptable contrast ratio at 4.5 for small text and 3:1 for large text. The contrast ratio on this current page (background color #c18fef, text color #000) is 8.44. If the text were white instead of black, the result would appear like this. As stated above, while this is still readable, it is harder on the eyes and less visually appealing; more importantly, however, it fails WCAG contrast standards (2.48). It is also important to note that even if a color contrast passes WCAG standards, the colors used must be chosen carefully, as users with certain forms of color blindness may have more difficulty reading certain color combinations than others. For example, this color combination has a contrast ratio of 4.5:1, so it passes WCAG contrast ratio standards. However, users with red-green color blindness would likely have a hard time reading text with this color combination, so it is best practice to choose different colors (furthermore, green text on a red background is generally not a visually appealing style and is harsh on the eyes even for people without significant visual impairments).
If a page's color contrast does not meet the WCAG minimums, it not only provides a noticeably worse user experience, it also may open the web page's owner to discrimination lawsuits. According to AudioEye, since the Americans with Disabilities Act (ADA) was made law in 1990, it does not directly make reference to legal standards on the internet; therefore, accessibility lawsuits almost always cite the WCAG as legal precedent for accessibility guidelines.
The Accessibility Guidelines Working Group is the group at the W3C that is responsible for setting web accessibility rules and guidelines. According to the W3C website, "The mission of the Accessibility Guidelines Working Group is to develop specifications to support making implementations of web technologies accessible for people with disabilities, and to develop and maintain implementation support materials." The AG WG utilizes task forces to focus their work into specific areas (Cognitive and Learning Disabilities Accessibility Task Force to create guidelines for accessibility to users with cognitive and learning disabilities, Low Vision Task Force to find solutions to accessibility issues for users with low vision or visual impairments, Mobile Task Force to create guidelines for best mobile display practices, etc.).
Specificity and contrast ratios may not be directly related, but they are both very important to keep in mind and adhere to when designing web pages, both to keep the page functioning correctly and to ensure the page is not prohibiting anyone with visual impairments from being able to properly navigate the website. It is much easier to write CSS rules in the correct order of specificity to make sure everything looks how you intend it to. It is also important to keep visual appeal in mind alongside contrast, and to make sure you are not using color combinations that are unpleasant when paired with each other, even if they technically do not violate any accessibility guidelines.