Accessible Color Combinations in Drupal

Why contrast matters...

It is important that text is readable against its background for everyone who comes to your site. Sufficient contrast between text and background colors is a critical part of digital accessibility.

Check color contrast

Accessible Layout Builder combinations

With Layout Builder, you can choose:

• 2 different text colors
• 7 background colors

Not all of these color combinations meet contrast requirements. 

Default text color

The default text color is accessible with the following background colors:

• Default background color (an offwhite)
• White
• Moondust
• Light grey

White text color

The white text color is accessible with the following background colors:

• Dark
• Beaver Orange

We don't include Beaver Orange as a selectable text color in Layout Builder due to its issues with ensuring contrast and readability. If the text color is Beaver Orange over the default page color at the default text size, it doesn't meet contrast requirements.