Brand Color Accessibility Reference

The palette

The Ryley's World brand palette is five colors plus white and black:

• Magenta #B11389 — described as "bright"
• Lime #92C951
• Cyan #31B9E4
• Tangerine #F68F35 — described as "light"
• Navy #21448B — described as "dark"
• White #FFFFFF
• Black #000000

The quick rule

Your safe text colors are white, black, and navy. Use brand colors as backgrounds and accents. Most brand-color-on-brand-color text combinations do not pass contrast.

This is true because the Ryley's World palette is bright and saturated. Bright colors are similar in lightness, and contrast depends on lightness difference. There is nothing wrong with the palette: it is great for visual identity. It just means text needs to be in a color that is meaningfully darker or lighter than the background.

White text only works on two backgrounds. Magenta and navy are the only brand colors dark enough to safely hold white text. Lime, cyan, and tangerine all fail with white text, even though they look like solid colors. On those backgrounds, use black or navy text instead.

Contrast combinations

The table below shows every combination of background color and text color in the brand palette. For each combination, the contrast ratio is given along with one of three status descriptions:

• Passes for all text — the combination works for body text and headlines (4.5:1 or higher)
• Passes for large text only — the combination works only for headlines or text 18pt and larger, or 14pt and larger at bold weight (3.0:1 to 4.5:1)
• Do not use for text — the combination fails contrast standards (below 3.0:1) and should be used only for decoration

What "large text" means

For the purposes of this reference, large text means text that is 18 point or larger at regular weight, or 14 point or larger at bold weight. In pixel terms, this is roughly 24 pixels regular or 19 pixels bold. Anything smaller than these sizes counts as body text and needs the higher contrast ratio (4.5:1 or above).

Note that Barlow Condensed Medium is not "bold" for the purposes of this rule. Use the regular-weight threshold (18 point and up) for any text in Medium weight.

On photos and gradients

This reference covers solid color combinations only. For text over a photo, you have two options:

• Place a solid colored shape behind the text. The text now has a known background color, and you can use this reference to choose the text color.
• Test contrast against the actual photo. Identify the lightest and darkest pixels under your text and check contrast against both. If your text fails against either, change the design.

The first option is faster and safer. Most accessible designs use it.

On decorative use

The combinations marked as "do not use for text" are failing for text, not for decoration. Brand colors paired with each other in shapes, dividers, backgrounds, icons, and other non-text elements have no contrast requirement. The full palette is available for visual design; this reference only restricts text-on-color combinations.

Two exceptions where contrast still applies for non-text elements:

• Icons that convey information (a checkmark, a warning symbol, a status indicator) need 3:1 contrast against their background.
• Buttons and interactive elements need 3:1 contrast for their borders or shapes against the surrounding background, so users can tell they are interactive.

A note about Barlow Condensed

Ryley's World uses Barlow Condensed as the brand font, in Regular, Medium, and Bold weights. Condensed fonts are visually distinctive but slightly harder to read at small sizes than non-condensed fonts. The narrow letterforms make it harder for readers with dyslexia, low vision, or anyone reading in poor conditions to distinguish similar letters quickly.

Two suggestions:

• Use Barlow Condensed for headlines and short text. It works well at 18 point and up, where the narrow letterforms still hold their shape.
• Consider adding non-condensed Barlow to the brand kit for body text. The Barlow family includes a non-condensed version that maintains the brand feel while improving readability at smaller sizes.

This is a small workflow change with meaningful benefit. It does not require dropping Barlow Condensed; it adds a sibling font for body use.

Quick reference summary

If you remember nothing else from this document:

• Safe text colors: white, black, and navy. Pick text from these three almost always.
• Use brand colors as backgrounds. Magenta, lime, cyan, tangerine, and navy all work as backgrounds with the right text color.
• White text only works on magenta and navy. Lime, cyan, and tangerine are too light for white text. Use black or navy text on those.
• Avoid brand-on-brand text. The one exception is navy text on lime (or lime text on navy), which works for body text. Everything else is decorative or large-text only.
• Photos need extra care. Put text on a solid colored shape over the photo, not directly on the photo.
• Reserve Barlow Condensed for headlines. Consider non-condensed Barlow for body text.