Font Color

All font colors pass the WCAG 2.1 Level AA contrast ratio requirements (ratio >= 4.5:1) and most pass WCAG 2.1 Level AAA requirements (ratio >= 7:1). The contrast ratio value is noted with the colors below. Please use only these colors or variations of these colors which pass WCAG 2.1 Level AA contrast ratio requirements.

Usage #

Use d-fc-{color} to change an element's text color.

<p class="d-fc-critical">...</p>

Hover #

Use h:d-fc-{color} to change an element's text color :hover state.

<dt-button kind="unstyled" class="d-fc-critical h:d-fc-success">Hover over me</dt-button>

Focus #

Use f:d-fc-{color} to change an element's text color :focus and :focus-within state.

<dt-button kind="unstyled" class="d-fc-critical f:d-fc-success">Focus me</dt-button>

Focus Visible #

Use fv:d-fc-{color} to change an element's text color on :focus-visible state [only when focused by keyboard].

<dt-button kind="unstyled" class="d-fc-critical fv:d-fc-success">Keyboard focus me</dt-button>

Changing Opacity #

Use d-fco{n} to change an element's text color opacity. You can also change font color opacity on :hover, :focus, :focus-visible by using the respective h:d-fco{n}, f:d-fco{n}, fv:d-fco{n} prefixes.

<p class="d-fc-critical">...</p>
<p class="d-fc-critical d-fco99">...</p>
<p class="d-fc-critical d-fco95">...</p>
<p class="d-fc-critical d-fco90">...</p>
<p class="d-fc-critical d-fco75">...</p>
<p class="d-fc-critical d-fco50">...</p>
<p class="d-fc-critical d-fco25">...</p>
<p class="d-fc-critical d-fco10">...</p>
<p class="d-fc-critical d-fco0">...</p>

Classes #