your guide to
Accessibility
Easy Accessibility From Day One
Ceemo starts you off right, with a fully accessible brand on day one.
Ensuring your startup is accessible to the disabled is not only the right thing to do, it’s also just plain good for business. 1 in 5 Americans have a disability! That means when your marketing is accessible, you’re increasing your potential market by 20%.
But maintaining accessibility is also a key part of safeguarding your startup’s future. The US Supreme Court has ruled that company websites are required to follow the Americans With Disabilities Act. If your company’s messaging isn’t accessible, you’re risking significant liability. Last year over 300,000 websites were sued for failing to meet ADA standards.
We created Ceemo so you can be accessible from day one. Our unique branding engine ensures every brand meets strict WCAG & ADA guidelines. With Ceemo, you won’t have to worry about expensive remediation or unreliable plugins trying to fix something after the fact. When your startup’s foundation is accessible, you can rest easy knowing your startup will reach its widest possible audience.
Let’s get started exploring the world of accessibile branding!
It's All About Contrast + Sizing
When it comes to your brand, there are two key factors you need to keep it mind when it comes to accessibility: contrast & size.
Contrast is all about the colors of your text and interactive design elements, compared to the color of your background. You want to ensure that vital information or things like buttons can be easily seen, understood, and/or interacted with, even by those who may have visual impairments like color blindness or glaucoma.
Size is another key factor, ensuring your text can be easily read, or that things like buttons can be easily seen, distinguished, and clicked on.
When you combine Contrast & Size, that determines whether or not certain brand elements are accessible or not. Guidelines were created by the W3C to help designers, developers & marketers understand how to create accessible content. These are known as the Web Content Accessibility Guidelines, or WCAG.
Accessibility Examples
- This Color Passes at Size 18pt Bold
- But it fails at size 12 regular
How Ceemo Incorporates Accessibility
We created every Ceemo brand to follow strict WCAG guidelines. You’ll notice in your Ceemo Brand Book that your color scheme is divided into specific types of color: Primary 1, Primary 2, Secondary, Accents, Neutrals, etc. We’ve created an entire system & coding language for your color scheme; a set of rules about how your brand elements can & cannot be used, all to maintain accessibility.
Behind the scenes, Ceemo follows those WCAG guidelines when it automatically applies your fonts & colors to your marketing materials. For instance, Ceemo knows to apply your Primary color to text that’s 16pts or larger. If it’s smaller than 16pts, then we switch to Primary 2, since it has a higher contrast ratio against white backgrounds.
When using your automatically generated Ceemo materials, everything’s automatically accessible!
But what if you want to make something custom using your Ceemo Brand? Don’t worry, that’s why we created this guide for you!
Your Ceemo Brand Accessibility Guide
Your Ceemo brand was designed to incorporate WCAG guidelines & we want to make sure that whether you’re using Ceemo designs or creating your own custom materials, that you can easily maintain accessibility throughout. To help you with that, we’ve created this guide to walk you through the underlying WCAG guidelines we used when creating your color scheme. It will explain a few key concepts.
1 • Usage Ideas: What kinds of design elements you can use your colors for. But of course, feel free to get creative!
2 • Minimum Contrast Requirements: When we designed your color scheme, this was the minimum contrast ratio we required to ensure your colors would always fit exact usage criteria. That dictates what size your text should be in those colors and what backgrounds they should be used on. But this just a minimum! Your unique color scheme’s contrast ratio might be different. You can always check your exact color hex code’s contrast against white or any other potential background color by using this handy Contrast Checker.
3 • Minimum Text Size: This will tell you the smallest size your text should be if it’s in that specific color. Unless otherwise stated, these recommendations are for use on a white background.
Finally, we’ve included a screenshot of a sample Ceemo Brand Book, so you can see where each of these color types is shown on your own Brand Book, to hopefully make it easier for you to apply each of these guidelines to your Ceemo color scheme. But as always, if you have any questions, feel free to reach out to us through Ceemo Support!
Good luck & happy designing!
Primary 1 aka “P1” is your core identity, the star of the show. Most representative of your Core identity keyword.
USES • Your logo, key design elements, text headlines.
MIN CONTRAST • 4.5 : 1
MIN TEXT SIZE • 18pt on White or Neutral 3.
Primary 2 aka “P2” is a darker variant of your main color, to ensure accessibility, giving you flexibility for multiple potential design scenarios.
USES • Smaller versions of your logo, smaller text, meta text, and design variation.
MIN CONTRAST • 7 : 1
TEXT • All text sizes are compliant on white backgrounds.
Secondary aka “S1” provides added depth & variation, reflecting your Supporting identity keyword.
USES • Alternate logo & headlines, secondary buttons, to direct the eye.
MIN CONTRAST • 4.5 : 1
MIN TEXT SIZE • 18pt on white.
Accent 1 aka “A1” is a medium accent, influenced by your Nuance core identity keyword.
USES • Non-interactive design elements for variation, designed to “pop” & catch the eye.
No set contrast requirements.
TEXT • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Accent 2 aka “A2” is a slightly softer tone, for added nuance & flair.
USES • Non-interactive design elements.
No set contrast requirements.
TEXT • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Neutral 1 aka “N1” is a medium tone, granting additional variation & room to play.
USES • Non-interactive design elements.
No set contrast requirements.
TEXT • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Neutral 2 aka “N2” is a lighter neutral, again to provide variation.
USES • Non-interactive design elements, alternate background color if using Bulk Text color.
No set contrast requirements.
TEXT • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Neutral 3 aka “N3” is a soft shade designed to be an additional background, subtle non-interactive design elements, or reverse color text option.
USES • An alternate background color if using P1, P2 or S1 text colors, following their same minimum text sizes. Alternately, N3 may be used as text atop P1, P2, S1, BT, or Black backgrounds.
MIN CONTRAST • 7 : 1 on BT or Black background.
TEXT • May be used as text above 18pt if P1 or S1 are the background colors. May be used at any size on P2, BT, or Black backgrounds.
Bulk Text aka “B1” is a custom “off-black” shade, giving you a unique shade for anything that would otherwise be flat black.
USES • All of your bulk text needs, any design elements that absolutely must stand out, or an alternate background if you want to use N3 as a text color.
MIN CONTRAST • 7 : 1
TEXT • May be used at any text size or weight atop white.
Primary #1
Primary 1 aka “P1” is your core identity, the star of the show. Most representative of your Core identity keyword.
Uses • Your logo, key design elements, text headlines.
Minimum Contrast Ratio • 4.5 : 1
Minimum Text Size • 18pt on White or Neutral 3.
Primary #2
Primary 2 aka “P2” is a darker variant of your main color, to ensure accessibility, giving you flexibility for multiple potential design scenarios.
Uses • Smaller versions of your logo, smaller text, meta text, and design variation.
Minimum Contrast Ratio • 7 : 1
Text • All text sizes are compliant on white backgrounds.
Secondary
Secondary aka “S1” provides added depth & variation, reflecting your Supporting identity keyword.
Uses • Alternate logo & headlines, secondary buttons, to direct the eye.
Minimum Contrast Ratio • 4.5 : 1
Minimum Text Size • 18pt on white.
Accent #1
Accent 1 aka “A1” is a medium accent, influenced by your Nuance core identity keyword.
Uses • Non-interactive design elements for variation, designed to “pop” & catch the eye.
No set contrast requirements.
Text • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Accent #2
Accent 2 aka “A2” is a slightly softer tone, for added nuance & flair.
Uses • Non-interactive design elements.
No set contrast requirements.
Text • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Neutral #1
Neutral 1 aka “N1” is a medium tone, granting additional variation & room to play.
Uses • Non-interactive design elements.
No set contrast requirements.
Text • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Neutral #2
Neutral 2 aka “N2” is a lighter neutral, again to provide variation.
Uses • Non-interactive design elements, alternate background color if using Bulk Text color.
No set contrast requirements.
Text • Never use for text, unless you confirm your unique scheme’s contrast ratio.
Neutral #3
Neutral 3 aka “N3” is a soft shade designed to be an additional background, subtle non-interactive design elements, or reverse color text option.
Uses • An alternate background color if using P1, P2 or S1 text colors, following their same minimum text sizes. Alternately, N3 may be used as text atop P1, P2, S1, BT, or Black backgrounds.
Minimum Contrast Ratio • 7 : 1 on BT or Black background.
Minimum Text Size • May be used as text above 18pt if P1 or S1 are the background colors. May be used at any size on P2, BT, or Black backgrounds.
Bulk Text
Bulk Text aka “B1” is a custom “off-black” shade, giving you a unique shade for anything that would otherwise be flat black.
Uses • All of your bulk text needs, any design elements that absolutely must stand out, or an alternate background if you want to use N3 as a text color.
Minimum Contrast Ratio • 7 : 1
Text • May be used at any text size or weight atop white.