Colors

Use this contrast checker to check your color contrast between text and background colors.

Global system palette#

All text should be set either in Ink Black or Chalk White only. All of the text on color contrasts shown here have achieved the required AA accessibility rating. You should only use the combinations shown here when applying type to any composition.

Brand Colors#

Black Text

 <p className="gr-brand-bg gr-white">
    Black Text
 </p>

Neutral Colors#

Black Text

White Text

Black Text

White Text

<p class="gr-white-bg gr-black">
    Black Text
</p>
<p class="gr-black-bg gr-white">
    White Text
</p>
<p class="gr-light-grey-bg gr-black">
    Black Text
</p>

<p class="gr-dark-grey-bg gr-white">
    White Text
</p>

Accent Colors#

Light Accent Colors#

Black Text

 <p class="gr-accent-one-light-bg">
    Black Text
 </p>
 <p class="gr-accent-two-light-bg">
    Black Text
 </p>
 <p class="gr-accent-three-light-bg">
    Black Text
 </p>

Midtone Accent Colors#

Black Text

 <p class="gr-accent-one-mid-bg">
    Black Text
 </p>

 <p class="gr-accent-two-mid-bg">
    Black Text
 </p>

 <p class="gr-accent-three-mid-bg">
    Black Text
 </p>

Dark Accent Colors#

White Text

 <p class="gr-accent-one-dark-bg gr-white">
    White Text
</p>

<p class="gr-accent-two-dark-bg gr-white">
    White Text
</p>

<p class="gr-accent-three-dark-bg gr-white">
    White Text
</p>