Slides from the presentation at CSUN ATC 2019

1. Application Theming
the Accessible Way
Melissa Brooks –
CollegeSource, Inc.

2. Agenda
• About me
• The problems we’re trying to solve
• Looking for inspiration
• Our solution

3. About Me
• User Experience Manager at CollegeSource
• Responsible for:
• User interface design
• Product Testing
• Product documentation
• Accessibility

4. About CollegeSource
• Higher Education software company
• Transfer Credit, Degree Audit and Degree Planning and Scheduling
• Clients throughout the United States, Canada and Hong Kong

5. The Problems
• Our clients theme or re-skin our web applications to match their
school colors/branding guidelines

6. The Problems
• Previously done by editing CSS files
• Requires IT involvement
• Assumes knowledge of CSS

7. The Problems
• When clients theme our applications, they could potentially break contrast
accessibility

8. Looking for inspiration
• Are there apps or websites that integrate theming with accessibility?

9. Looking for inspiration
• Twitter
• Set one hex color for all buttons
and links on your profile page

10. Looking for inspiration
• Seems to be some sort of
threshold
• If you select a color that’s too
light, it doesn’t save it
• No indication why you aren’t
able to save it

11. Looking for inspiration
• It allows for colors that do not
pass WCAG 2.0 color contrast
guidelines

12. Looking for inspiration

13. Looking for inspiration

14. Looking for inspiration
• Tumblr
• Set an “Accent” and a
“Background” color
• “Accent” is the color for links on
your Tumblr profile

15. Looking for inspiration
• Tumblr
• Can set both accent and
background to the same color

16. Looking for inspiration
• Atlassian’s Confluence
• Collaborative documentation tool
• Can set custom themes for the
entire application or via individual
space

17. Looking for inspiration
• Atlassian’s Confluence
• Can set text and background
colors, but no warning if in
combination do not have good
contrast

18. Looking for inspiration

19. Looking for inspiration
• WebAIM Color Contrast Checker
• Set foreground and background
color
• Displays:
• Contrast Ratio
• An example
• If those colors pass WCAG AA and
AAA
• Allows you to adjust the
lightness/darkness

20. Our Solution
Let’s add the functionality of a contrast checker
within a theming tool

21. How to check the contrast?

22. How to use these colors?
• Color values (hex values) are saved in the database
• We wanted to load colors via CSS rather than javascript

23. How to use these colors?
• Use LESS to generate the CSS files
• LESS is a CSS preprocessor
• Allows you to use variables, operations, and functions

24. How to use these colors?
• User is setting LESS variables
• Used to generate hover, active and disabled styling

25. Our Theming Tool

26. Our Theming Tool
• The theming tool within the
uAchieve applications
• A user with administrator access
sets the colors for two themes,
“Default” and “High Contrast”

27. Our Theming Tool
• We tell them if the contrast ratio
between the text and
background of elements is
WCAG compliant

28. Our Theming Tool
• Contrast checks for:
• Two menus
• 7 buttons
• Charts & Graphs
• Two overall themes:
• Default
• High Contrast

29. Our Theming Tool
• Opted not to add a color picker at this time
• Colleges and Universities have set color schemes they must use

30. Our Theming Tool

31. Our Theming Tool

32. Our Theming Tool
• On the default theme, users can
save non-compliant colors
• On the high contrast theme,
they cannot. All color selections
must pass at least WCAG AA

33. Parting Thoughts
What are other ways we as designers and
developers can include accessibility tools within
our applications?

34. Questions? Melissa Brooks –
CollegeSource, Inc.