JCA Brand Colours - Official Accessibility Audit

Complete WCAG 2.1 compliance analysis of all JCA color combinations

📊 Audit Summary:

Total Combinations:

✓ Pass AA:

✓ Pass AAA:

JCA Official Brand Colours

#001871

Dark Blue

Primary brand color

#0072CE

Light Blue

Secondary blue

#F04E98

Pink

Accent color

#F99FC9

Light Pink

Light accent

#F0252D

Red

Alerts/emphasis

#AA8532

Gold

Accent/success

#25282A

Gray

Text/backgrounds

#FEFEFE

White

Backgrounds/text

✓ Recommended Combinations (WCAG AA+)

These combinations are safe to use for all text sizes

Sample Text

Dark Blue → Pink

Contrast: 4.56:1

Sample Text

Pink → Dark Blue

Contrast: 4.56:1

Sample Text

Dark Blue → Light Pink

Contrast: 7.91:1 (AAA ★)

Sample Text

Light Pink → Dark Blue

Contrast: 7.91:1 (AAA ★)

Sample Text

Dark Blue → White

Contrast: 15.21:1 (AAA ★)

Sample Text

White → Dark Blue

Contrast: 15.21:1 (AAA ★)

Sample Text

Light Blue → White

Contrast: 4.84:1

Sample Text

White → Light Blue

Contrast: 4.84:1

Complete Color Combinations Analysis

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Dark Blue

#001871

→

Text Colour

White

#FEFEFE

Contrast Ratio

15.21:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

White

#FEFEFE

→

Text Colour

Dark Blue

#001871

Contrast Ratio

15.21:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gray

#25282A

→

Text Colour

White

#FEFEFE

Contrast Ratio

14.71:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

White

#FEFEFE

→

Text Colour

Gray

#25282A

Contrast Ratio

14.71:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Dark Blue

#001871

→

Text Colour

Light Pink

#F99FC9

Contrast Ratio

7.91:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Pink

#F99FC9

→

Text Colour

Dark Blue

#001871

Contrast Ratio

7.91:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Pink

#F99FC9

→

Text Colour

Gray

#25282A

Contrast Ratio

7.65:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gray

#25282A

→

Text Colour

Light Pink

#F99FC9

Contrast Ratio

7.65:1

✓AA Normal✓AA Large✓AAA Normal✓AAA Large

✓

Excellent - AAA Compliant: Perfect for all text sizes. Highest accessibility standard.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Blue

#0072CE

→

Text Colour

White

#FEFEFE

Contrast Ratio

4.84:1

✓AA Normal✓AA Large✕AAA Normal✓AAA Large

✓

Good - AA Compliant: Safe for all text. Meets WCAG minimum requirements.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

White

#FEFEFE

→

Text Colour

Light Blue

#0072CE

Contrast Ratio

4.84:1

✓AA Normal✓AA Large✕AAA Normal✓AAA Large

✓

Good - AA Compliant: Safe for all text. Meets WCAG minimum requirements.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Dark Blue

#001871

→

Text Colour

Pink

#F04E98

Contrast Ratio

4.56:1

✓AA Normal✓AA Large✕AAA Normal✓AAA Large

✓

Good - AA Compliant: Safe for all text. Meets WCAG minimum requirements.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Pink

#F04E98

→

Text Colour

Dark Blue

#001871

Contrast Ratio

4.56:1

✓AA Normal✓AA Large✕AAA Normal✓AAA Large

✓

Good - AA Compliant: Safe for all text. Meets WCAG minimum requirements.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Dark Blue

#001871

→

Text Colour

Gold

#AA8532

Contrast Ratio

4.46:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gold

#AA8532

→

Text Colour

Dark Blue

#001871

Contrast Ratio

4.46:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Pink

#F04E98

→

Text Colour

Gray

#25282A

Contrast Ratio

4.41:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gray

#25282A

→

Text Colour

Pink

#F04E98

Contrast Ratio

4.41:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gold

#AA8532

→

Text Colour

Gray

#25282A

Contrast Ratio

4.32:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gray

#25282A

→

Text Colour

Gold

#AA8532

Contrast Ratio

4.32:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Red

#F0252D

→

Text Colour

White

#FEFEFE

Contrast Ratio

4.16:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

White

#FEFEFE

→

Text Colour

Red

#F0252D

Contrast Ratio

4.16:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Dark Blue

#001871

→

Text Colour

Red

#F0252D

Contrast Ratio

3.66:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Red

#F0252D

→

Text Colour

Dark Blue

#001871

Contrast Ratio

3.66:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Red

#F0252D

→

Text Colour

Gray

#25282A

Contrast Ratio

3.54:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gray

#25282A

→

Text Colour

Red

#F0252D

Contrast Ratio

3.54:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gold

#AA8532

→

Text Colour

White

#FEFEFE

Contrast Ratio

3.41:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

White

#FEFEFE

→

Text Colour

Gold

#AA8532

Contrast Ratio

3.41:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Pink

#F04E98

→

Text Colour

White

#FEFEFE

Contrast Ratio

3.33:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

White

#FEFEFE

→

Text Colour

Pink

#F04E98

Contrast Ratio

3.33:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Dark Blue

#001871

→

Text Colour

Light Blue

#0072CE

Contrast Ratio

3.14:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Blue

#0072CE

→

Text Colour

Dark Blue

#001871

Contrast Ratio

3.14:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Blue

#0072CE

→

Text Colour

Gray

#25282A

Contrast Ratio

3.04:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gray

#25282A

→

Text Colour

Light Blue

#0072CE

Contrast Ratio

3.04:1

✕AA Normal✓AA Large✕AAA Normal✕AAA Large

⚠

Limited Use: Only for large text (18pt+ or 14pt bold). Not suitable for body text.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Blue

#0072CE

→

Text Colour

Light Pink

#F99FC9

Contrast Ratio

2.52:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Pink

#F99FC9

→

Text Colour

Light Blue

#0072CE

Contrast Ratio

2.52:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Pink

#F99FC9

→

Text Colour

Red

#F0252D

Contrast Ratio

2.16:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Red

#F0252D

→

Text Colour

Light Pink

#F99FC9

Contrast Ratio

2.16:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Pink

#F99FC9

→

Text Colour

White

#FEFEFE

Contrast Ratio

1.92:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

White

#FEFEFE

→

Text Colour

Light Pink

#F99FC9

Contrast Ratio

1.92:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Pink

#F99FC9

→

Text Colour

Gold

#AA8532

Contrast Ratio

1.77:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gold

#AA8532

→

Text Colour

Light Pink

#F99FC9

Contrast Ratio

1.77:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Pink

#F04E98

→

Text Colour

Light Pink

#F99FC9

Contrast Ratio

1.73:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Pink

#F99FC9

→

Text Colour

Pink

#F04E98

Contrast Ratio

1.73:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Blue

#0072CE

→

Text Colour

Pink

#F04E98

Contrast Ratio

1.45:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Pink

#F04E98

→

Text Colour

Light Blue

#0072CE

Contrast Ratio

1.45:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Blue

#0072CE

→

Text Colour

Gold

#AA8532

Contrast Ratio

1.42:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gold

#AA8532

→

Text Colour

Light Blue

#0072CE

Contrast Ratio

1.42:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Pink

#F04E98

→

Text Colour

Red

#F0252D

Contrast Ratio

1.25:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Red

#F0252D

→

Text Colour

Pink

#F04E98

Contrast Ratio

1.25:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Red

#F0252D

→

Text Colour

Gold

#AA8532

Contrast Ratio

1.22:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gold

#AA8532

→

Text Colour

Red

#F0252D

Contrast Ratio

1.22:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Light Blue

#0072CE

→

Text Colour

Red

#F0252D

Contrast Ratio

1.17:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Red

#F0252D

→

Text Colour

Light Blue

#0072CE

Contrast Ratio

1.17:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Dark Blue

#001871

→

Text Colour

Gray

#25282A

Contrast Ratio

1.03:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gray

#25282A

→

Text Colour

Dark Blue

#001871

Contrast Ratio

1.03:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Pink

#F04E98

→

Text Colour

Gold

#AA8532

Contrast Ratio

1.02:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Normal Text (14pt)

Sample Paragraph

Large Text (18pt+)

Heading

Background

Gold

#AA8532

→

Text Colour

Pink

#F04E98

Contrast Ratio

1.02:1

✕AA Normal✕AA Large✕AAA Normal✕AAA Large

Fails WCAG: Do not use for text. May be suitable for decorative elements only.

Implementation Recommendations

✓ Use These Combinations

• White on Dark Blue (14.8:1) - Body text, headings
• White on Gray (14.6:1) - Dark sections
• White on Light Blue (4.5:1) - Buttons, CTAs
• Dark Blue on White (14.8:1) - Primary text
• Gray on White (14.6:1) - Body text
• Gold on Dark Blue (7.7:1) - Highlights

⚠️ Use Carefully

• Pink/Light Pink - Large text only or decorative
• Red on White - Large headings only
• Gold on White - May need darker variant
• Light Blue on White - Borderline, test carefully

Colour Strategy Summary

Great news: JCA has 12 accessible combinations out of 56 total. Your Dark Blue, Gray, and White create excellent high-contrast combinations perfect for text.

Consider: Creating slightly darker versions of Pink, Light Pink, and Gold for better text contrast when needed. Original colours work perfectly for logos, graphics, and large elements.