Brand Accessible Colour Contrast Suggester

Introduction

When we use a corporate brand, the requirement to ensure we make accessible choices may leave us reliant on a small set of colours. With each use of the Randomise button, a background colour, text colour, and three graphic colours will appear at random from the UoS brand. This may help you to choose a new accessible and on-brand colour combination for your next document, presentation, or infographic.

Upload your own colours

Upload JSON

JSON file with color hex codes and names

Example format:

[
  {"colourHex": "#FFFFFF", "name": "White"},
  {"colourHex": "#000000", "name": "Black"}
]

Upload CSV

CSV file with colors (supports multiple formats)

Supported formats:

HEX,NAME
#FFFFFF,White
#000000,Black
NAME,HEX
White,#FFFFFF
Black,#000000
HEX
#FFFFFF
#000000

Enter Colours as Text. Select "Add Colours" when ready.

Enter one colour per line using any of these formats:

  • Name and hex code with comma: White, #FFFFFF
  • Name and hex code with colon: White: #FFFFFF
  • Hex code only: #FFFFFF

View insights and statistics

Understanding Versatility Scores

The versatility score measures how well a background colour works with other colours in the palette. A higher score means the colour is more versatile for different design needs. The score is calculated by combining three factors:

Score Components

Enhanced Text Contrast (40% of score)
The percentage of colours that achieve AAA-level contrast (7:1 or higher) when used as text on this background. These combinations provide excellent readability for all users.
Standard Text Contrast (35% of score)
The percentage of colours that achieve AA-level contrast (4.5:1 to 6.9:1) when used as text. These combinations meet basic accessibility requirements.
Graphic Element Contrast (25% of score)
The percentage of colours that can be used for graphics or UI elements (achieving at least 3:1 contrast) on this background.

Understanding the Results

Highly Versatile ⭐
Colours with a score of 34.5% or higher are marked as highly versatile. These colours work well with many other colours in the palette while maintaining accessibility.

Example Calculation

For a background colour in a palette of 20 colours:

  • If it has AAA contrast with 8 colours: 8/20 × 0.40 = 16%
  • If it has AA contrast with 6 colours: 6/20 × 0.35 = 10.5%
  • If it works with 12 colours for graphics: 12/20 × 0.25 = 15%
  • Total versatility score: 16% + 10.5% + 15% = 41.5%

This background colour would be marked as highly versatile since 41.5% > 34.5%.

Manage colours in use

Default palette is the University of Southampton brand, upload your own brand.

Use the Randomise button to get started!

Colour details

Background colour:    
Lock background colour?

Text colour:    
Text contrast:
WCAG Rating:
APCA Rating:
Text contrast array used:

Graphic 1 ❅ colour:    
Graphic 1 contrast:
WCAG Rating:
APCA Rating:

Graphic 2 ♡ colour:    
Graphic 2 contrast:
WCAG Rating:
APCA Rating:

Graphic 3 ✪ colour:    
Graphic 3 contrast:
WCAG Rating:
APCA Rating:

Results

What does "WCAG Rating" mean?

WCAG means the Web Content Accessibility Guidelines. The rating refers to a number of WCAG success criteria outlined below and for what purpose the level of contrast is suitable.

G: Contrast ratio is at least 3:1
AA: Contrast ratio is at least 4.5:1
AAA: Contrast ratio is at least 7:1

What does "APCA Rating" mean?

APCA (Advanced Perceptual Contrast Algorithm) provides a sophisticated assessment of contrast that considers font size, weight, and perceptual factors. There are two conformance levels: Bronze (basic) and Silver (precise).

APCA and Traditional Contrast Ratios

While APCA uses a different scale than traditional contrast ratios, these approximate comparisons can help understand the levels:

  • APCA Lc 90 is similar to ISO 10:1 contrast ratio
  • APCA Lc 75 is similar to WCAG 7:1 contrast ratio
  • APCA Lc 60 is similar to WCAG 4.5:1 contrast ratio
  • APCA Lc 45 is similar to WCAG 3:1 contrast ratio

Silver Level Conformance Guidelines

For the most accurate accessibility, APCA recommends using the Silver level guidelines, which provide specific contrast requirements based on font size and weight combinations.

Key Points for Silver Conformance:
  • Font size is measured in CSS pixels (px)
  • Reference fonts include Helvetica, Arial, Verdana, Montserrat, Roboto, and Calibri
  • Serif fonts (like Times, Georgia) should use the next higher contrast level
  • Negative APCA values (light text on dark) use the absolute value
Preferred (Lc 90): Highest Contrast Level
  • Tl;dr: Required for small text and critical reading. Similar to ISO 10:1.
  • Required for text smaller than 16px at normal weight (400)
  • Required for text at 14px regardless of weight
  • Essential for body text in small sizes
  • Comparable to ISO 10:1 contrast ratio standard
High (Lc 75): Standard Body Text
  • Tl;dr: Good for most body text with proper size/weight. Similar to WCAG AAA (7:1).
  • Minimum for 16px text at normal weight (400)
  • Can be used with 18px text at weight 300
  • Similar to WCAG 7:1 contrast ratio (AAA level)
  • For body text blocks, add Lc 15 to the minimum requirement
Standard (Lc 60): General Content
  • Tl;dr: Suitable for larger text and headings. Similar to WCAG AA (4.5:1).
  • Minimum for 24px text at normal weight (400)
  • Can be used with 21px text at weight 500
  • Similar to WCAG 4.5:1 contrast ratio (AA level)
  • Appropriate for most headings and larger content
Minimum (Lc 45): Large Text
  • Tl;dr: Minimum for large text and UI elements. Similar to WCAG graphics requirement (3:1).
  • Suitable for text 32px and larger
  • Similar to WCAG 3:1 contrast ratio
  • Acceptable for large UI elements and headlines
  • Equivalent to WCAG minimum for graphical elements
Low (Lc 30): Absolute Minimum
  • Tl;dr: Minimum threshold for any text.
  • Absolute minimum for any readable text
  • Limited to very large text sizes (48px+)
  • Should not be used for essential information
Insufficient (Below Lc 30)
  • Tl;dr: Not suitable for text; decorative only.
  • Not permitted for any text content
  • Only acceptable for decorative elements
  • Should be avoided for any meaningful content

Important Notes

  • Decorative and thin fonts should be avoided for body text
  • Compare unusual fonts to standard fonts like Helvetica for proper sizing
  • Avoid using "-webkit-font-smoothing: antialiasing" as it can reduce contrast
  • For body text blocks, add Lc 15 to the minimum contrast requirement
  • Font weights below 300 should generally be avoided for readable text

Note: APCA values can be positive or negative, but the absolute value determines the contrast level.