Working with colours

Question 1

What is a color CSS data type?

Answer 1

The <color> CSS data type represents a color.

A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.

Source MDN

Question 1

How can you specify a <color> CSS data type?

Answer 1

A <color> can be defined in any of the following ways:

• Using a keyword (such as blue or transparent).
• Using #-hexadecimal or rgb(), hsl(), hwb() functional notations to specify a color in the sRGB color space.

Source MDN

Question 2

What does the currentColor keyword represent?

Answer 2

The currentcolor keyword represents the value of an element’s CSS color property. This lets you use the color value on properties that do not receive it by default.

Example:

<div style="color: blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background: currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

Source MDN

Question 3

What is the RGB color model?

Answer 3

The RGB color model defines a given color in the sRGB color space according to its red, green, and blue components. An optional alpha component represents the color’s transparency.

Source MDN

Question 4

How can you specify an RGB color model?

Answer 4

RGB colors can be expressed through both hexadecimal (prefixed with #) and functional (rgb(), rgba()) notations.

Source MDN

Question 5

What is the contrast ratio?

Answer 5

The contrast ratio explains the difference between the lightest color brightness and the darkest color brightness in a given range.

Source css-trics

Question 6

Why is the contrast ratio important?

Answer 6

A good contrast between text or graphics against the background color makes the content of your site readable.

It is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors.

It is good to have a cool design on your website, but the design is worthless if your users can’t read your content.

Source MDN

Question 7

What are the recomended constrast rations in WCAG guidelines?

Answer 7

Source MDN

Question 8

How can you check the contrast ratio of 2 colors?

Answer 8

Using online tool such as contrast-ratio.com.

Question 9

What does CSS color-scheme property do?

Answer 9

The CSS color-scheme property lets the browser use (or choose) to display certain elements with its dark or light default styling.

The color-scheme property is defined in the CSS Color Adjustment Module Level 1 specification, where it is called the “Opting Into a Preferred Color Scheme” property.

Source css-tricks

Question 10

Syntax of CSS color-scheme property

Answer 10

Syntax

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

The color-scheme property’s value must be one of the following keywords:

• normal - Indicates that the element isn’t aware of any color schemes, and so should be rendered using the browser’s default color scheme.
• light - Indicates that the element can be rendered using the operating system light color scheme.
• dark - Indicates that the element can be rendered using the operating system dark color scheme.
• only - Forbids the user agent from overriding the color scheme for the element.

Can be used to turn off color overrides caused by Chrome’s Auto Dark Theme, by applying color-scheme: only light; on a specific element or :root.

Source MDN

Question 11

How can we apply a dark theme or a light theme depending on the user’s system or browser preferences?

Answer 11

With the prefers-color-scheme CSS media feature.

The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

It takes two values:

• light: When a user has selected that they prefer a light theme or has no active preferences
• dark: When a user has selected a dark display in their settings

Example:

body {
  --bg-color: white; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --bg-color: black;
    --text-color: white;
  }
}

“A Complete Guide to CSS Media Queries | CSS-Tricks” (CSS-Tricks). Retrieved February 8, 2024.

Question 12

What are the differences between color-scheme and prefers-color-scheme?

Answer 12

color-scheme is all about default appearances. It tells the browser to update the colors in its stylesheet.

Meanwhile, prefers-color-scheme is all about applying the styles we write in our own stylesheet, and only when that condition is met. In other words, any style rules we write inside the media query are applied — it has nothing to do with the browser’s default styles.

“color-scheme | CSS-Tricks” (CSS-Tricks). Retrieved February 8, 2024.