Thursday, May 21, 2015

Pulse of Higher Education Accessibility

I found this article Patterns in Higher Education Accessibility Complaints very interesting in respect to where we are right now with providing accessible electronic and information resources (EIR), academic services, and other services across all institutions of higher education. This is not an exhaustive list, but it gets to the issues most complained about across our campuses nationally.

Two resources he mentioned about litigation with higher education were also included:
Again, none of these are exhaustive. I mentioned in a past article the National Association of the Deaf is attempting a class-action lawsuit, filing two first against Harvard and MIT on lack of appropriate closed captioning of online videos or educational materials. And more recently, the United States Department of Justice is involved in a blind student's lawsuit with Miami University (Ohio - not Florida) over inaccessible software.

This brings me to an important aspect to my duties as the EIR Accessibility Coordinator. The first list of complaints mentions issues that may need the attention of different accessibility coordinators on Tarleton's campus. For example, I do not personally handle issues related to academic courses and test taking. Students are asked to contact Center for Access and Academic Testing (CAAT) for assistance in these areas. Faculty and staff can contact Employee Services for assistance getting assistive technology in their work environment. However, my list of duties as Tarleton's EIR Accessibility Coordinator are defined by the Texas Department of Information Resources. Generally speaking, it involves checking all our electronic and information resources for compliance with accessibility standards as well as any we have yet to procure for university use and training those who create EIR content as well as resolving any issues that come up.

Procurement is a big issue because pretty much everything we buy has some EIR aspect to it and has to be upgraded and maintained in ways that keep them compliant or improve their compliance. The following electronic and information resources must be reviewed for compliance with accessibility standards:
  • Web Applications and Software (e.g., websites Tarleton uses, email, TexanSync, mobile apps)
  • Software Applications (e.g., Microsoft Office and Outlook, Adobe Creative Suite)
  • Operating Systems (e.g., Windows, Mac, Android)
  • Telecommunications (e.g., phones)
  • Videos/Multimedia (e.g., YouTube, Vimeo)
  • Self Contained (e.g., copy/fax cachines, laboratory equipment)
  • Desktop/Portable/Mobile Computers (e.g., Apple iPad, Microsoft Surface)
That is a huge list and not even a comprehensive one! That's obviously more than I can juggle along with my primary job position as Web Designer / Developer. Some of these issues are actually checked by other organizations that assist accessibility coordinators in determining accessibility. Organizations like Knowbility (where I just recently attended a conference) assist all of us in training vendors who provide these kind of EIR as part of their business. In fact, one of the vendors on the most recent lawsuit was there (another didn't tell me who they worked for) to learn how to make their products accessible.

The point I'm trying to make here is that not all software is accessible - nowhere near that. However, with everyone's assistance and open communication, we can all become more compliant and avoid these lawsuits that are starting to really pop up everywhere nowadays. People with disabilities have been aware of the laws that protect them from discrimination for a long time, but that "legal" word has not spread as it should and from their point of view, they've waited long enough for us to make certain changes to our processes, so they are no longer discriminated against.

As always, I will keep you informed of any changes to the laws and what we need to do to comply. If you have any questions, please feel free to contact me. Open communication keeps us better prepared to handle these tough issues and determine our direction moving forward.

-Karole

Tuesday, May 19, 2015

Responsive at a Glance

Web technology has changed so much in the last five years. What used to be straight-forward and simple has now gotten complex with the invention of responsive technology. The world has a jungle of devices, and the devices display many different breeds of websites. We as developers have to make decisions on how to organize our websites so that all devices in all sizes give users the same opportunities to needed information. We are, in a sense, genetic engineers.

Responsive technology does not provide a perfect viewing platform for online information. It is by far the best methodology we have for the amount of device sizes we must cater to, but inevitably there will be some things that are visually bothersome. The most important thing is to make the same information available to all devices.

With traditional publications, such as posters, brochures, and billboards, there are things we must pay attention to, such as whitespace, image placement, kerning, and content alignment. In the web world, these things are less precise, especially with responsive development. We can of course program to provide the best situations for popular screen sizes, but everything in-between can* have a slightly spaced-out, misaligned, or unnatural feel. (*some responsive developers are better at preventing this than others!)

A great example of a responsive design is the new Texas.gov website. They made things simple by
Texas.gov website screenshot
The new www.texas.gov website
putting all of the important information on the homepage (without crowding it) and making it easily searchable. The content is easy to read, and scrolling down the page is quite pleasant. They use what our office calls a "stacked" page structure, where only one section of information is available per "row" on your desktop or mobile phone. This allows for consistency of design on all platforms and makes finding information easy. Their predictive search is on par as well, providing organized categories of results including related agencies, services, search suggestions, and more.

We have taken a similar approach with Tarleton's website. Our responsive homepage is "stacked" and we provide predictive search capabilities. We try to provide a similar user experience no matter what device is used, however small differences can be noticed.

To demonstrate some of the differences in how a single page may look on different devices/screens, I am providing photos of Tarleton's homepage below. You will see differences in text/image size, space taken up by text, column sizes, content organization, navigation look, and more.

This is a mobile view of Tarleton's homepage. You will see a collapsed menu and search at the top, a banner slideshow underneath the header, and a portion of the locations section. Each content item is "single file" down the page, with the slideshow image appearing ahead of the slideshow text.

Since this mobile phone is small, there is not room for desktop-style navigation. If we did try to fit traditional navigation on the device, the text would either be too small to press with a finger or take up too much valuable real estate. We have decided to collapse the navigation menus just for mobile phones and very small devices.


This is a tablet view of the homepage in a vertical/portrait orientation. On this one you can see quite a bit of Tarleton's homepage, in fact, you can see all the way down to part of the News section. We have the normal navigation available without it being collapsed. You can also see a bit of space underneath the text on the right side of the slideshow.

We are able to see further down the page because of the size of the device vs. the screen resolution. Even though the device is smaller than most desktop screens, the screen resolution and vertical orientation allow for more vertical page to be visible.


This is the same tablet, but in a horizontal/landscape orientation. Obviously, less of the page is visible in this orientation, with only part of the locations section visible. We are able to fit in the full navigation just as with the vertical orientation of the tablet.


Here is Tarleton's homepage on an older desktop screen, with 1920x1080 screen resolution. Since the screen is more square than rectangle, you get a more narrow view of the page than a wider-screen version. You can see the entire locations section and a little sliver of the highlights section.

Since the screen is much larger than a tablet, you can see we have adjusted the text size so that it isn't too large. In doing so, we have created extra "whitespace" to the right of the image and underneath the slide text. Considering there is a different amount of text accompanying each slide of the slideshow, there can be more or less whitespace. It all depends on how long the title and teaser need to be for each slide.


Lastly, this is a widescreen desktop view of the homepage.There is quite a bit more space in header, the navigation bar, and in the slideshow text area. Again, if we were to make the text larger in order to fill those areas, the size of the text would be too overwhelming for the screen size.


As you can see, Tarleton's homepage looks different on all of these screens. However, the same information is available on that page for all devices. Given this is just a small sampling of the hundreds of screen sizes available, we can conclude that responsive technology is here to stay for the foreseeable future.

Web Services is constantly learning more about responsive technology, and has been programming some changes to the responsive templates in order to remedy some of the whitespace and issues with being "too spread out." We will be adding a "gutter" to our pages so that the main content is more consolidated and less spread out horizontally. The page will still be responsive, but should be more visually appealing and easier to follow. The homepage changes should debut sometime this summer.

For another visual explanation of responsive design, check out this blog article from FROONT: 9 basic principles of responsive web design.


-Daphne

Thursday, May 14, 2015

Putting People First: Deciding What Is Important Contextually

Describe the sun to a person who has been blind their whole life, and you will likely find some challenges. For example, what is this thing called "color" or "bright"? What does red or yellow look like? But you can tell a blind person that the sun is round like a ball because that is something they can relate to, something they can feel here on Earth - definitely don't encourage trying to touch the actual sun!

As usual around this time in May, I headed down to Austin, Texas, for the annual John Slatin AccessU Conference hosted by Knowbility. And as usual, they bring some kind of art or cultural experience to the conference in respect to some aspect of accessibility compliance. The keynote speaker this year was the Blind Film Critic himself, Tommy Edison, and he took us on a journey through audio descriptions on Monday night at the Alamo Drafthouse Cinema on South Lamar.

Right now audio descriptions feel like the adopted children of video players and movie theaters (and probably every other theatre) when it comes to accessibility options. We are becoming more and more accustomed to providing closed captioning for the deaf, but what about the actions that are important for the story that the blind cannot comprehend based on sounds and dialogue alone?

Blind audience members were dismayed when their blind superhero, Marvel's Daredevil, came to Netflix without audio descriptions. Daredevil's alter ego, Matt Murdock, is constantly provided with audio descriptions of people's actions by his friends throughout each episode, but the same could not be said for the Netflix subscribers who complained about this irony. Netflix announced a decision to start adding audio descriptions four days after posting the entire season.

"Oh, sorry, you didn't see that. She just nodded her head."

Tommy Edison judged attendees, instructors, and staff of the AccessU conference to a contest of audio description to see who could describe 90 seconds worth of a scene the best. Before anyone took a shot at it, some attendees took an audio description class Monday morning and the rest of us enjoying the show at the Alamo Drafthouse listened to a professional audio describer depict the 2015 Oscar winner for an animated short film Feast. She was lucky, though. She'd seen Feast maybe ten times beforehand and refined her description to best tell the story. We, however, watched an entirely different short film, and had to come up with a description to a story we had never seen before. Everyone tried hard, but it was obvious that without understanding the story and without properly analyzing the scenes, where dialogue and sound began and ended, you aren't providing anywhere near the full story.

Audio descriptions are the alternative text for moving images, so you can take much of your instruction from the average alternative text guide for website compliance (many of which are posted on A Picture is Worth a Thousand Words... Literally). As a sighted audience member, I am overwhelmed with visual information. So if I were to try to describe what is happening in any scene or an entire movie, which details do I include? Which ones are important? More importantly, which details are important to a person who is blind?

For example, the short film we were audio describing had three white characters and one black character. Do we describe the fourth character as being black? Again, those born blind do not know what color looks like. Unless the fact that the character is black, as opposed to the actor portraying the character being black, is important to the context of the story, this detail can be ignored. It provides no essential information to the story, so it wastes otherwise important and precious time to describe something else.

One hang up I had while the professional was describing the dog in Feast was that she wasn't describing all the visual cues, the facial and body language. That, I learned, is information blind people would not comprehend anyway, unless you don't mind your privacy being invaded by someone constantly touching your face for new facial expressions. However, blind audiences can gather a great deal from verbal cues like inflection and pitch while speaking.

This hang up is one we all share. So often when we come up with content, we look at it from our own point of view, what we think our audience wants or needs. This only helps us, not our audience which makes them more confused and need to ask more questions from us. We have to turn our focus to them, get in their shoes. What is important to them? Focus on the important details.

Interesting little debate that we somewhat covered over comedic scenes: due to the fact that the audio description needs to occur at times when other sounds and dialogue are not the focus, a blind audience member listening on their headset may start laughing at the punchline to a joke seconds before the rest of the audience gets the punchline visually at the movie theater. They say people have actually told the blind attendees to hold back their reactions, but is that discrimination? By telling them they cannot experience and react to the performance naturally, on their own time, are you making it a better experience for one group of people or all groups of people?

Don't understand the situation? Okay, let's say you are on Facebook or Twitter or whatever social medium, and you had to work the late shift during a TV show that you absolutely love, and you just told all your friends not to say a word because it would totally spoil it for you. Keep in mind, they have lots of other friends who are interacting with each other on social media while watching the same show, but you've just told them they can't have any interaction at all in relation to this TV show because you would see it before you turned on your DVR. Is it the same kind of discrimination? Do they have the right to post the spoilers? Is it possible for you to ignore those posts (or laughs) for a short period of time to catch up with them later? What do you think?

-Karole

Wednesday, May 6, 2015

What is Good for SEO is Good for URL

There are a number of important factors that come into play when improving search engine optimization (SEO). Descriptive titles and keywords are very important, but did you know how you type the page or file names can also affect SEO?

What is a URL?


A URL (uniform resource locator) is a web address. It's the name you type out or click on within a page that spells it out that takes you to the location of a page or file on the internet.

Tarleton State University has a very nice, clean web address: www.tarleton.edu

Domain (.edu) and Domain Name

As an educational institution, we have the ability to acquire a domain name ending in .edu. This signifies authority and legitimacy across the internet. Not just anyone will be eligible for a .edu domain, so this increases the value of your content and raises your ranking on search engines the most.

We also made it very simple to find us by sticking to "tarleton" as our domain name. Imagine if we had gone the route of www.tarleton-state-university.edu. First, that is a very long web address. Also note the hyphens separating the words. Now, what I'm about to tell you is based on some research allowing Google robots to scan websites without any links to them and rank them accordingly. If hyphens are in the domain name, Google sees these as less authoritative web addresses and lowers their rankings. If, however, we had used www.tarletonstateuniversity.edu as one word, Google would raise the ranking. But honestly, do you really want to type that much for our web address? Probably not. Neither do your constituents.

Resources


Moving to the right of the domain and domain name we have our resources. Let's look at a very important resource on our website which ranks very high on SEO: www.tarleton.edu/index.html.

Homepage or Index Page


Depending on what your IT professionals decide on the back end, you will often see index.html or default.html as your homepage. At Tarleton, our homepages are index.html. That is, if we wanted someone to go our main homepage or departmental homepage, we wouldn't actually have to type that portion out. A homepage can have the web address form of www.tarleton.edu as opposed to www.tarleton.edu/index.html or www.tarleton.edu/webservices as opposed to www.tarleton.edu/webservices/index.html.

Again, we like shorter web addresses. The less we have to type, the better. They also look much better on brochures and other publications. These "index" or "home" pages are very important for SEO, though. You should always use them in your website structure to denote the main page on a website or within a folder in your website.

Page and File Names


So now down to the nitty-gritty details of other page and file names. There are good characters and bad characters to use when naming your files and pages. A typical name can include upper- and lowercase letters, hyphens, underscores, periods, and that weird squigly line we still have on some of our websites called the tilde. Trouble starts when you go outside that set of characters because other characters are needed for calculations or interactivity with scripts and applications. The following characters should be avoided at all cost in your page and file names: ! @ # $ % ^ & * ( ) + =[ ] { } | , \ / < > ? `

Syntax Rules


Then come the rules, like you should only use a period when saving a file. It is the punctuation used to separate file name from its extension. It also helps software applications determine which one should open your file. For example, if your file ends with .doc, then your computer is typically going to open up Microsoft Word to see the file.

Spaces vs Hyphens vs Underscores


We often save our files in a way that is readable to us, such as including spaces in the name. That's great for internal use, but it is not helpful for SEO. Spaces are also a bad character to use in page and file names on the internet. We often try to replace them with either underscores or hyphens, but which one is actually better for SEO? Here's what is really going down with those two characters:

If you use a hyphen, you are helping the search engine separate words out to be readable and searchable, so marine-biology comes up as "marine biology" in search engines.

If you use an underscore, you are telling the search engine to combine words, so marine_biology becomes "marinebiology" in search engines.

Is "marinebiology" a word? How high would it land in the page rankings then? Probably not very high, since it makes the assumption that someone is specifically looking for "marinebiology" as opposed to "marine biology" in their search (or we hope they made a spelling error). That means it is better to use hyphens to replace spaces in a page or file name.

This is obviously opposite of the rule for domain names, but it really does work for resources after the domain name:
  • www.tarleton.edu/webservices/web-guidelines.html
  • www.tarleton.edu/webservices/post-apocalyptic-design.pdf
  • www.tarleton.edu/web-services/index.html

Make it All Lower Case


Some search engines and analytics software are case sensitive. Your page can be typed in multiple ways. Each way has its own search rankings or analytic results. That knocks their values down because they aren't all leading to the same page. They do not add together in the final results. To avoid hijacking your own results, use lowercase letters for your page and file names.

Other SEO Practices to Consider

While the web address itself is important to SEO, there are many other things you can do to help your pages rise in the ranks. Some techniques have been called "black hat" due to their inappropriate usage to falsely make claims of authority on topics. Google and other search engines will actually lower your rankings in the search results or ban your site if you use black hat tactics. Here's a list of Do's and Do Not's:

Do provide the appropriate keywords that span the content of your specific page.

For example, if you are talking about chocolate, you can mention dark chocolate and white chocolate if that content is part of your webpage's message. Don't separate chocolate from bunnies, if you are referring to chocolate bunnies. The topics for those two words are entirely different, so combine them.
 
Do Not "keyword stuff" on any portion of your page, including metadata such as title, keywords, teaser, summary, or description. Keyword stuffing is repeating the same keyword multiple times in one or more of metadata or portion of the page, such as hidden text on a page or alternative text on an image.

Using the chocolate example, you don't need to say you sell chocolate in Fort Worth, Dallas, and San Antonio with the keywords Fort Worth chocolate, chocolate Fort Worth, Dallas chocolate, chocolate Dallas, San Antonio chocolate, chocolate San Antonio. Just add the locations to an appropriate section, like the description where you say, "We proudly sell our delicious chocolate in locations across Texas, including Fort Worth, Dallas, and San Antonio."

Do use keywords in the context of your message on your webpage. Remember, your audience is coming to you on this topic specifically. If the page talks about this topic, their keywords would likely be somewhere within the conversation, not just within the metadata. In fact, keywords in message content on a webpage play a larger role in ranking than keywords in metadata.

Do Not use keywords that are unrelated to your content.

Usability

And a final recommendation in regard to page titles. While many web maintainers get concerned about adding keywords into the page title, you really want to keep them quite simple. This is in part due to black hat practices of stuffing, but here's a different perspective:
  • What are you reading on the search results?
  • What are you reading if you are choosing a bookmark in your long list of bookmarks?
If every page title starts out the same, then you can't tell the difference without investigating further. Most users are not that curious.

Here at Tarleton, all our Cascade pages already include that we are Tarleton State University. You don't need to include it in your title. Instead, start with the page topic, then go to the department name. For a fake example, Glorious Dark Chocolate - Department of Chemistry & Biology - Tarleton State University. ("- Tarleton State University" does not need to be entered in Cascade.)

Start specific and go out. Note I didn't mention the College of Science and Technology in the page title. Keep it simple.

Last but definitely not least, make all your page titles unique!

-Karole

Friday, May 1, 2015

Student Employee of the Semester Award - Spring 2015

Each semester we award one of our student employees with the "Student Employee of the Semester Award" in web services. This semester's award was given to our student intern, Yaritza Corrales.

Morgan Hammond, Yaritza Corrales, Daphne Hunt
Yaritza is a star-performer in everything that she does in Web Services. She has made great strides in collecting and placing content for our new degree pages. Yaritza has well-written communication and has done well with tackling difficult situations. Her eager attitude and pleasant demeanor has made an impact in our office. She is quick to share ideas and suggest new opportunities for engagement.

Left to right: Ernesto Martinez, Danielle Dunigan, Colton Sheffield, Silvia Fuentes, Josh Roelofs, Daphne Hunt, Morgan Hammond, Yaritza Corrales, Karole Schroeder

Web Services has had a busy semester, and could not have completed the large number of projects and tasks without having such a strong team. We look forward to continuing to serve the university this summer as we continue to roll-out our new responsive degree program pages.

-Daphne

Update on Templates in Project Squishy (Responsive Web Design)

From a programming perspective, we have been receiving a number of requests for an update on our progress on Project Squishy, and I'd like to speak on that for everyone instead of responding to these requests individually to keep our progress transparent to our community.

As we mentioned in January, programming in SASS has been a major learning curve. As we try to keep the new CSS file small enough that loading time doesn't deteriorate your experience, we are combining functionality to make the user experience, in general, more intuitive. We are also making some improvements to the accessibility of different modules which is a constant work in progress as technology changes.

First of all, there will be two primary templates used across the Tarleton website. The first one you have already seen on the main Tarleton homepage is called "Stacked" due to the way the modules stack up on top of each other like pancakes, cake layers, sandwich layers, or any other delicious food product you can think of (we love food). The second template will have the same functionality, the same modules, as the "Stacked" template, but it will also include the navigation you need in order to provide all your departmental content, called "Right Navigation."

Right Navigation template screenshot
Screenshot of the sandbox (no factual information) version of "Right Navigation"
We set up user testing on this sandbox page to determine the usefulness and appropriateness of our new content and navigation modules. This test page was built with fake information in order to determine content placement. For example, users found the breadcrumbs very helpful on this page to navigate back up through our hierarchy, even though they knew nothing about the fake academic degree program.

Some of the most exciting news, though, came from testing the content we have placed on the right hand side instead of the left. The location of the navigation menu was a big question in the Digital Media Advisory Committee, so we wanted to get it right. Right hand side navigation assisted users to read the content on the left first and then look to the navigation for more information if they couldn't find it. This will increase the importance of content on pages and help us strategically build navigation menus that are clean and concise.

We also found out that placing the contact information on the right side, below the navigation menu, was very intuitive for our users. They targeted it immediately when asked who to contact for more information about our fake degree program.

Obviously, the right navigation would take up a great deal of real estate on a mobile phone's screen, so it will be located under the same menu button as our Main Menu navigation on mobile phones - just above the Main Menu. This is a common practice among commercial and educational websites, and it keeps our web pages clean and open for our main focus: your content!

Academic degree program page featuring new modules
Screenshot of an academic degree program page
With the addition of our new academic degree pages highlighted on the Tarleton homepage, we have a few more modules premiering, including:
  • Tall Aside: provides a location for main textual content and an option to provide text, images and videos on an aside box
  • Rotating News: scrolling bucket layout of images and content
  • Button: basic module to post button looking links for significant information
As we collect information from all the academic departments on their degrees and place them on these new pages, we are working on implementing a degree search feature that will be highlighted on the Tarleton homepage as well as available in the functionality of the search box, similar to our Web Site Directory search (customized to display content based on the keywords you want your degree to focus on), on every page.

What is our time table for all of this? Each staff member and student intern is focusing on a different aspect of this conversion process. We have a goal to highlight a new degree page once a week. We are also aiming to start creating pages in the "Right Navigation" template this summer. As we receive programming requests and other design/development requests, this timeline gets shifted, but we are very excited to be moving to a more responsive website and working with you to put your best foot forward on your departmental websites!

-Karole

Accessible Color By Numbers

When I took my first design class in college, we studied elements and principles of design extensively. The majority of our class projects were done in black and white (or grayscale) to focus on the artistic value each had to any art piece. Obviously, we were all itching to get into color, but we had to wait until almost the end of the semester.

Color provides extra meaning to a design. Just like the other elements, color can create a mood or define a message. However, for a colorblind or visually impaired audience that meaning can be lost. That's not to say that color should be ditched for every design.

An audience that can view your design can still interpret some meaning as long as the colors contrast well enough.

What does that actually mean? For an audience with no visual impairments, that still means the colors should contrast enough to read words if words are necessary to convey a message. For example, if you provide event information in a light yellow against a white background, that content is not readily readable for even the most able person.

Have you ever walked up to a poster in just the right (or wrong) lighting, and noticed you can't read the information due to the glare on the poster? Some visual impairments replicate that issue even in good lighting. Providing enough contrast can help your audience see your information despite the "glare."

For the most colorblind among us, though, that means you are back to that grayscale design that still needs to convey your message. If any color is too close in similarity to another color when converted to grayscale, your content will achieve that "glare" issue that makes it unreadable. Similar issues occur when someone cannot see any combination of red, green, and/or blue.

I've previously mentioned in a number of articles a color contrast checker I use all the time: Colour Contrast Check. It takes the hexadecimal value, or HEX, of the color for the foreground and background and calculates their contrast ratio. To meet WCAG 2.0 AA compliance (which we are working towards with the upcoming Section 508 Refresh), all text and images of text must have at minimum a contrast ratio of 4.5 to 1 unless the text is large scale (3 to 1), purely for decoration, or text is part of a logo. To meet AAA compliance (far stricter standard that meets a larger disabled audience's needs), the contrast ratio minimum is 7 to 1, with a higher minimum for large scale text at 4.5 to 1. I try to stick to AAA, but we are not required to meet more than AA compliance at this time.

How many people reading that just went blank at the term "hexadecimal value" and ignored all the other math in the paragraph? Most of our design software for emails, newsletters, brochures, and everything in between allow you to choose colors based on RGB (Red, Green, Blue) values. Those values are often converted to hexadecimal values for use on the web, so most color contrast checkers use hexadecimal values. Let me apologize there because I'd love to provide you with an optionally RGB color contrast checker. When I get one, I'll let you know.

I have, instead, a compromise for you called Color Safe which is the designer's accessible color swatch picker.

It begins by asking you what your background color is going to be in (hiss) that hexadecimal value, what web-friendly font you'd like to use at what font size and weight (how bold the text is), and then it asks you which WCAG standard you want to use: AA or AAA. Again, AA will give you more color choices than AAA.

Beneath those options, you have a field of text that automatically changes based on your options above. You can also change it from the standard "The quick brown fox jumps over the lazy dog." phrase to anything you may be using in your message.

When you are happy with those starting options, you can Generate Color Palette which changes your interface to chose the color swatch for the foreground you may want to use, the RGB value (yay, finally!) or HEX value of that color swatch, the resulting text with those foreground and background colors, and last but not least, the contrast ratio based on your selected WCAG standard.

Below all that are the glorious color options you were waiting for. You can select primary hues to see what tints and shades as well as dullness or brightness comply under that standard. Select one and check above for the results.

Again, the awesome part of this application is that you can grab the RGB values that you can use in Word or Outlook, and so forth, once you have picked the colors you wanted.

If you are wondering how easy it is for you personally to distinguish colors, take this fun color acuity challenge! I was tired the first time I took it, so my score was a bit off. The next morning, I tried it again being more focused, and I got a perfect score. Just an excuse you might want to use if you want to challenge your friends.

-Karole