CSS/Properties/color

From W3C Wiki

color

The color property describes the foreground color of an element's text content.

Description

Values <color value> | <color keyword> | currentColor | transparent | inherit
Initial value Depends on user agent.

HTML5 indicates that the initial value for the 'color' property is expected to be black, but users can easily change it in their user agent settings.

Applies to All elements
Inherited Yes

Values

  • <color value>
    The color can be specified as
    • a hexadecimal RGB value: #faf or #ffaaff
    • a RGB value: rgb(255, 160, 255) or rgb(100%, 62.5%, 100%)
      Each value is from 0 to 255, or from 0% to 100%.
    • a RGBA value: rgba(255, 160, 255, 1) or rgba(100%, 62.5%, 100%, 1)
      This variant includes an “alpha” component to allow specification of the opacity of a color. Values are in the range 0.0 (fully transparent) to 1.0 (fully opaque).
    • a HSL value: hsl(0, 100%, 50%)
      A triple (hue, saturation, lightness). hue is an angle in degrees. saturation and lightness are percentages (0-100%).
    • a HSLA value: hsla(0, 100%, 50%, 1)
      This variant includes an “alpha” component to allow specification of the opacity of a color. Values are in the range 0.0 (fully transparent) to 1.0 (fully opaque).
  • currentColor
    Same as ‘inherit’.
  • transparent
    Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
  • inherit
    Takes the same specified value as the property for the element's parent.

Example

Example A

[style.css]

 body {
   color: #fff;
   background-color: #666;
 }

[index.html]

  <body>
    <h1>CSS color property example</h1>
  </body>


Considerations

Separating foreground from background

In order to make it easier for users to see and hear content including separating foreground from background, [WCAG] indicates the following:

  • color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. [Guideline 1.4.1] (Level A)
  • The visual presentation of text and images of text has a minimum contrast ratio of at least 4.5:1, with some exceptions. [Contrast Minimum Guideline 1.4.3] (Level AA)
  • The visual presentation of text and images of text has an enhanced contrast ratio of at least 7:1 [Guideline 1.4.6] (Level AAA)

CSS Reference

CSS defines the color property in CSS Color, 3.1. Foreground color: the ‘color’ property.

See also