Accessible Color Combinations (work in progress)

Text Must be White

Background color is #585858

You can also use a lighter grey (#b6b4b4), but you'll need to use black for the text color for contrast accessibility

Accessible Color Combinations

#0e58a5 and white(#fff)

#005A9F and #fff

background is #1d781d, white text is accessible

Here is all the text for x, background is #x and color is #x for accessibility

Colors

Brand Primary

#3a2777

.dark-purple-bg

#6849bc

.white-bg--opaque

#074474

.dark-blue-bg

#0b72c1

.blue-bg

Brand Secondary

Currently only used on Parents Community page
promo promo-1-color
#1779a3
#97C767 promo promo-2-color
#F78E1E
promo promo-3-color
#FFC222
promo promo-4-color

Grays

#999
.dark-grey-bg
#eee
.grey-bg
#F5F4F4 light-grey-bg

Buttons





.btn-cta should only be used for donation asks. Any "Donate Now" or "Support Us" buttons should use this class.


Opaque backgrounds

Opaque backgrounds are best used with background images. See markup below for examples of how to implement.


Become an Audiobook Subscriber

For those who have trouble reading, audiobooks are a powerful tool that supports improved comprehension, boosts confidence and leads to better grades.


Headers

Heading 1: The quick brown fox is so quick

Heading 2: The quick brown fox is so quick

Heading 3: The quick brown fox is so quick

Heading 4: The quick brown fox is so quick

Heading 5: The quick brown fox is so quick
Heading 6: The quick brown fox is so quick

All Headers should use @font-family 'Milo-Bold'


Paragraphs


All paragraph text should be at least 1em (on 16px scale) in font-size.

For accessibility << Font-size styles should be specified as em, not px or pt.

All paragraphs should use @font-family 'Milo'

Use <strong> </strong> tags to make things bold, use only on a few highly significant words and use sparingly

 


Forms


Use Bootstrap forms where possible

For accessibility purposes, make sure each <input> is paired with a <label>. If you would like to remove the labels from view add the class ".sr-only" to the label.


Example Form

* indicates required fields




By clicking on Submit Payment you agree to Learning Ally's Terms of Service


Create Account

We respect your privacy.

Form Validation

Use the 'Validation Summary' and place at the top of the form, using a bulleted list with the class of 'NormalRed' to show errors as red. The form validation must be housed in a div that has 'aria-live="polite"' in order for screen readers to focus and read the errors



Images


Use Bootstrap's responsive image classes wherever possible. Images should also be given a class of ".img-thumbnail" to provide a border around them.

Get started now

Get started now

Access the Teacher Ally user guides, IT guides, app guides and parent and student letter. Find the support you need to succeed.

Engage your students

Engage your students

Access book analysis forms, graphic organizers and a book club guide. Successfully integrate audiobooks into your classroom.

Grow the Community

Grow the community

Access ideas about how to spread the word about the benefits of Learning Ally, audiobooks and ear reading. Share the success.

Image Accessibility

Unless an image contains text or is crucial to a user's navigation of the website; an images alt tag may be left empty. Most of our images are decorative and contain empty alt tags so that they do not get in the way of users with screen readers.



Videos


To make an embedded video fit the size of it's container, place the video's embed code inside the following div tags. Be sure to include 'allowfullscreen="true"' so that users can make the video full screen. A maximum of 2 videos should be placed side-by-side per row, in order to allow room for closed captioning:

<div class="embed-responsive embed-responsive-16by9">
<!-- Place video embed here -->
</div>

Alerts


Use Bootstrap alerts for alerts on user dashboards. Be sure to use h2's as the title though. This ensure that BVI users can access alerts when they login to their account.

Examples:

Success:

Info:


Layouts


Full width Headers

When using full width layouts:

These headers should make use of background images when possible. When using these layouts be sure to use an opaque background color over the background image to make sure that the text stands out from the image. We serve a low vision audience who will thank you very much for doing so.

When a full width image is not available consider using a two column layout.

Example:





Two column Headers

When using two column headers:

These headers should make use of background images when possible. When using these layouts be sure to use an opaque background color over the background image to make sure that the text stands out from the image. We serve a low vision audience who will thank you very much for doing so.

When a full width image is not available consider using a two column layout.

Example:


Kit resources layout

Engage your students

Engage your students

Access our book analysis forms, graphic organizers and book club guide. Gain insight into how Learning Ally and audiobooks can integrate into your classroom.

Get Started
Get started now

Get started now

Access the Teacher Ally user guides, IT guides, app guides and parent and student letter. Find the support you need to succeed.

Get Started

Kit resources cards

Student-to-Student Video

Student-to-Student Video

470 views

Introduce your students to Learning Ally. Through the voices of other students, help them realize that they are not alone!


Benefits of Audiobooks

Benefits of Audiobooks

530 views

Help your students become independent ear readers.


Other Elements:

Progress Circles

1 2 3 4 5


<span class="circle grey-bg border--light-grey">1</span>
<span class="circle grey-bg border--light-grey">2</span>              
<span class="circle blue-bg">3</span>              
<span class="circle secondary-green-bg">4</span>              
<span class="circle secondary-green-bg">5</span>