Data Visualization for Color Accessibility

Data Visualization for Color Accessibility

Let’s talk about color accessibility — the ability to view all colors on a screen regardless of a reader’s visual ability. A crucial feature to low-visibility and colorblind readers, color accessibility can be achieved with good design and attention to color contrast. And it’s important to consider when designing any product, digital or physical — especially if that product relies on data visualization to carry out its purpose.

This is the story of how we addressed the design challenge of visualizing data for color accessibility at Kiddom.

New Product; New Design Challenge

Earlier this year we launched a K-12 school operating system for school and district administrators to measure and act upon classroom intelligence. Academy is our first enterprise product, supporting our free product for teachers and students (Kiddom for Classrooms) by connecting schools and districts to teachers and students on one operating system.

As we began working on Kiddom Academy, we saw an opportunity to define a new visual language. Prior to Academy, our classroom product had been tailored towards teachers and younger students who would be using the products to create, complete, assess, and communicate about assignments, so we optimized the design for these tasks, with some simple reporting and a color scheme that was based largely on the role using the product. For example, teachers had a blue theme, and students had a purple theme.

But, as Academy would stand as the highest-level dashboard for schools or districts to understand what was going on at every level (district, school, class, and student), the newest product would require a greater amount of data visualization.

So the challenge was to keep the visual design consistent and on brand while addressing a functional design change to work with more data — this meant more colors, and those colors needed to be accessible to all. It soon became clear to us that the new product would call for a radical redesign of our existing color palette.

Step One: Analyze the Starting Palette

For the first step, we put all of our color palettes together to analyze the overlap and discrepancies.

This was the palette at the start of our project. As you can see, it’s complex, has tons of overlap, and doesn’t address accessibility for the colorblind.

An overlap example: as you can see here, the colors quickly became muddled in the UI. The primary action color was conflated with the English subject color.

Let’s take a look at reports in the earlier versions of the product. As you see here, there were four colors in the Mastery chart, two of which were already being used in other contexts. There was also no logical progression to the color scheme (red-yellow-purple-green), making it hard to parse at a glance.

It was clear we would need to simplify, and we were beginning to gain a sense of our constraints, but before reinventing the wheel, we decided to check industry standards to see what norms existed in the education technology space.\

Step Two: Study Industry Norms

In our study of industry-specific norms, we would be looking at how others may have handled the color accessibility problem, as well as general color scheme; if teachers expected a particular color for their data, we’d be fighting an uphill battle by changing it.

In normal vision, these charts are pretty clear. The red is bad, green is good. However, turn on colorblind mode, and it’s not clear what each of the slices means. The difference between red and green just isn’t visible.

Let’s take a look at a wider palette that incorporates more colors.

In this example, the middle point isn’t overly obvious, and the ends of the spectrum, although contrasting from each other, are hard to pick out. Upon studying the norms, it became clear there were some common approaches, but no standard. We would have to make the call on what was best for our users.

Step Three: Define Constraints

Thanks to our analysis, we identified two constraints important to us, and a number of action items. As mentioned, our first constraint was color accessibility: Our colors should have enough contrast so that colorblind people can differentiate them from each other. This would be particularly important in any view that shows data reporting.

The second constraint was to reduce color overlap. This was simple enough, as we had a lot of similar colors used for totally different purposes. So, we decided it was clearly time to trim some fat.

It’s time for solutions!

Step Four: Determine Color Overlap

First, we looked at how much overlap we could remove. Let’s take a look at where each column’s colors were used in the product.

These colors were almost the same as our subject palette. Since our subjects were more integrated in the design, we chose to remove the content type.

As mentioned, our original intent was to theme the app depending on which role you were using. The available roles in the earlier products were Student, Teacher, and Parent.

However, with the addition of the Admin in Academy (green), we were adding a lot of complexity to this palette. So we made the decision to simplify by removing the overlaps of each role’s primary color.

Step Five: Improve Color Accessibility

To exemplify how we improved color accessibility for data visualization, we’ll use the example of our Student Mastery scale. On the surface, this design worked pretty well. With the exception of the purple, there was a clear progression. The middle point was extremely visible and the endpoints stood out nicely.

However, when we put our colorblind shades on, you’ll notice the contrast was super reduced. The mid point became almost invisible, and the ends were still visible, but only the “Exceeding” section really stands out. From here, we decided we could do better.

From here, a number of iterations followed. First, we tried red and green with higher contrast. This worked to highlight the ends of the spectrum, so users knew where to focus. The middle point was still obvious, but when we took a look in color blind mode… Sadly, although the middle point was still obvious, the ends of the spectrum were almost identical.

Then we tried an approach with more blue. This was the ‘hot and cold’ concept. And generally worked fine. However, we became concerned with the potential palette overlap with the Interaction Blue our buttons (mentioned below), so we tried a bit of purple. The purple gave us a similar issue, but overlapped with the purple in our Subject palette.

In the end, the teal approach was the most successful. We could have an obvious, contrasting middle point, while still highlighting the ends of the spectrum:

Step Six: Simplify Color Palette

Now let’s move back to the complex palette. Instead of predefining every variant of a color, every tint, every shade, we thought perhaps we could be smarter about the way we define our palette?

So we changed our approach and defined a layering system. There are now two layers: the primary color, and the overlay (tint).

By placing a tint on top of a primary color, we were able to create a consistent result, regardless of the primary color. This meant that Classroom and Academy could use the same system, but only differ by one color.

Of course we still needed a contrasting color for buttons and links, so we included a global ‘interaction’ color. To adhere to our constraints, we went for a loud blue that is AA+ accessible. And here’s the final color palette:

We hope you enjoyed learning about the discoveries along our process as much as we did, and we encourage you to check out our product for teachers to experience it for yourself!

If you have any comments, suggestions, or concerns, please let us know by sending them to info@kiddom.co. We are constantly iterating our product for teachers and for administrators, and your feedback is aways appreciated.

More Behind-the-Scenes Articles

Data Visualization for Color Accessibility

Let’s talk about color accessibility — the ability to view all colors on a screen regardless of a reader’s visual ability. A crucial feature to low-visibility and colorblind readers, color accessibility can be achieved with good design and attention to color contrast....

What Makes Kiddom for Android Special? Interview

I'm a developer. I'm a generalist. I bring to the table 15 years of experience packaged as a solid fullstack engineer. A proven record of successful products shipped. Love working with people from different backgrounds. Finding ways to create great systems. Balancing...

Teaching and Learning Made Beautiful: Introducing the New Kiddom

We’re building Kiddom to be a collaborative platform to allow teachers and learners to work together effortlessly, no matter where they are. To that end, today we released a completely redesigned platform, one which will help teachers plan, assess, and analyze...

What Makes Kiddom for Android Special? Interview

What Makes Kiddom for Android Special? Interview

Guillermo Alcantera

Guillermo Alcantera

Mobile Engineering Lead, Kiddom

I’m a developer. I’m a generalist. I bring to the table 15 years of experience packaged as a solid fullstack engineer. A proven record of successful products shipped. Love working with people from different backgrounds. Finding ways to create great systems. Balancing quality, time and scope.

As many of you know, teachers can plan, assign, assess, report, and more using Kiddom, available via desktop, Apple, and as of earlier this year, Google Play.

But there’s more to our Android product than you might think. This week, we had a chat with Kiddom’s Mobile Engineering Lead, Guillermo Alcantara, to tell us what makes the Android product special.


So, what is unique about Kiddom Android compared to other versions of the product?

Guillermo: If you’re using Kiddom on Android you’ll find it is more similar to the web experience than our iPhone app, which often has a different interface, than what you might see online. That’s because we’ve created more custom widgets for iOS, whereas with Android we’re building more for Google’s vision. In other words, because Android’s store is owned by Google, the Android mobile product is more optimized for Google standards.

Kiddom on Android is also more performant; we’ve put more emphasis on making the product work in varied conditions. For instance, if your network is slow or your screen is small, the Android product can be handy in those situations… we have built it from the start with attention to limitations like internet speed, battery life, and smaller screens. Our Apple product, on the other hand, is a more optimized experience for newer Apple devices, in keeping with iOS protocol.

A third uniqueness about our Android product is the ability to be easily translated, which is on our roadmap to release soon. It’s not something we have prioritized, but the entire app is ready to be translated — as many of our users are Spanish-speaking, and we know that could help a lot of schools.



Speaking of what’s “on the roadmap,” can you tell us more about what is coming soon for Kiddom’s Android product?

Guillermo: Soon we’ll be able to offer a translatable version of Spanish and Chinese. Many developers are familiar with FIGS (French, Italian, German, and Spanish), which is perhaps a traditional approach to translate, but we’ll likely make our earliest translations in Spanish and Chinese.

We are also constantly using our Android app to run tests that help foster a better user experience, so often those roadmap features show up on Android first. Like the Snapshot Roster feature, and the ability to take notes, for instance.


Can you speak more on the Snapshot Roster feature?

Guillermo: One feature we’re excited about releasing soon is the ability to add students on mobile in a quick and easy manner. Teachers can simply use their phones to take a snapshot of their student roster, whether digital or in print, and from that list, our product creates a new account for each student using text recognition technology called OCR (Optical Character Recognition). This will save teachers a great deal of time when they need to add a new class or want to switch over to Kiddom in the middle of a semester.


…and the Notes feature?

Guillermo: Yes, it provides users the ability to make notes. This feature was first available only in Android and we hope to soon make it available to everyone. That’s because we typically use Android to test new features. If we see that enough people are using the features we’re testing, we’ll roll them out to all of our products for everyone to use.


Can you tell us about the Student Groups Feature in Android?

Guillermo: Student groups — right now Kiddom assignments are only available for the entire class or one individual student, but what if you have a team assignment? This is a feature being testing in Android right now.


In closing, can you share what is your favorite part about the Android app?

Guillermo: I like the Timeline better in Android than in any other client. It’s easier to swipe rather than scroll.

…and that’s all he had time for! (Engineers are busy people, you know.) We hope you learned something new and useful, and as always, teachers, please let us know your thoughts and requests! We are building these products for you. ❤

For more information on Kiddom Android, visit our Support Page, or you can always reach us at support@kiddom.co if you have any questions.

More Product Articles

Live at AESA: Kiddom Chats with The EduTech Guys

Education and SaaS technology leader with a passion for K12 edtech. Last month, Jason Katcher, VP of Revenue at Kiddom, sat down with the EduTech Guys at AESA 2018 (Colorado Springs, CO) for an interview about what we're doing here at Kiddom. Read the full transcript...

Teaching and Learning Made Beautiful: Introducing the New Kiddom

Teaching and Learning Made Beautiful: Introducing the New Kiddom

We’re building Kiddom to be a collaborative platform to allow teachers and learners to work together effortlessly, no matter where they are. To that end, today we released a completely redesigned platform, one which will help teachers plan, assess, and analyze learning in one cohesive system.

Why redesign Kiddom? Well, we’ve been doing our homework. And we’ve learned that teachers are often set up for failure from the start of the school year. They’re expected to plan a year’s worth of curriculum without knowing much about their incoming students. Once the year gets underway, they’re expected to keep up with the ever-changing needs of each student. Yet the tools teachers have access to don’t allow for the flexibility required to focus on individuals. By the end of the school year, this becomes a source of frustration and teachers reflect on how they might minimize this sense of powerlessness next year. The school year is effectively an emotional roller coaster ride for teachers. But with this version of Kiddom, we hope to change that.


Keeping track of class work, including late submissions, can get cumbersome. With Timeline, you can add, view, and grade class and individual student assignments all from one place.

How Timeline works:

  • Press the blue + button to start building an assignment. Add details and feel free to attach a file or a document from Google Drive.
  • If you don’t want to reinvent the wheel or need resources fast, use Kiddom’s content library and search for standards-aligned content.
  • You can assign to everyone, a group, or an individual student. You can even sort by mastery level to assign by performance level.
  • To get the most out of Kiddom’s reporting, append standards to assignments.
  • Once you’ve shared an assignment, you’ll come back to your Timeline. Click the assignment created to start grading. From here, you’ll be able to see who completed their work and who hasn’t. Click on a student to grade and leave feedback.

Once you’ve created an assignment, you can always come back and edit it. So don’t worry about making mistakes.


Curriculum design is fundamentally emotional work, representing the journey educators plan for students to make meaningful connections. With Kiddom’s Planner, teachers can finally design curriculum for a class and modify pathways for groups or individual students.

How Planner works:

  • Open Planner from the right side of your Timeline. Create a new unit and add a title and description.
  • Add content to units by clicking the blue + button in the Planner. Add a single assignment or a playlist, which is a group of assignments. Playlists are great for grouping resources like videos, readings, and quizzes on the same topic.
  • To assign, simply drag the assignment or playlist into your Timeline. To assign content to an individual, simply filter your Timeline to reflect the student you’d like to assign directly.

We have a sneaking suspicion you’ll be geeking out with Planner. Don’t hold back.


With Kiddom’s new beautiful, actionable reports, it’s never been easier to analyze performance and pivot instruction. Reports help monitor student progress over time, track growth by mastery level, and analyze both class and student performance on individual standards.

How Reports work:

  • Once you’ve added and graded assignments, your reports will spring to life. Select weekly or monthly reports to view mastery data for the desired time frame.
  • The first reporting metric, Class Grade Average, depicts your overall class mastery. This is the class average on all graded assignments.
  • Scroll down to view mastery groups as a stacked line graph. This graph groups students by mastery level over time. Clicking on the number of students in a group reveals the students while clicking on a data point reveals where students lie at the end of any given week or month.
  • Next, your Class Standards Mastery tracks every standard assessed in your class. The lines depict the progress made on each standard. A single dot with dotted lines indicates there is only one assignment aligned to that standard.
  • To obtain reports for individual students, use the drop down menu on the left to choose the student you’d like to analyze. To download and print your reports, click on the “download reports” button.

Personalized learning doesn’t happen magically. Teachers must effectively use student achievement data to adjust their practice in real-time. With these reports, that’s now possible. Hooray!


We recognize every classroom is unique. That’s why we redesigned settings as your personal command center: to manage the finer details of your class.

How Settings work:

  • Access your settings by clicking on your avatar. Clicking on a class will let you manage the finer details of your classes.
  • Edit the subjects and grade levels of your class from the “info” tab. Don’t forget, you’re allowed to have multiple grades and subjects for each class. You can also manage the standards appended to your class. Add custom standards from here.
  • Manage your students from the “students” tab and click “manage students.” You can add students manually, import from another class, import from Google, or invite them to join on their own via your class code.
  • The grading tab allows you to modify grading methodology and calculation. Adjust your reports to show percentages, mastery, letter grades, or grade points. You can also adjust how your grades are calculated here (weighted, unweighted, or max value). Add additional assignment types to reflect the assignments types of your classroom.
  • Add or edit rubrics from the final tab, “Rubrics.” Add your own rubrics or add rubrics from Kiddom’s bank of preset rubrics.

There’s a lot of power in being able to modify Kiddom to meet your needs, as well as your students’. If you love to customize your tools, you’re going to love your new settings.

What’s Next

While we’re incredibly excited about the new Kiddom, we know there’s more work to be done. Over the next several months, we’re going to focus on building additional feature sets to accelerate our vision of building a collaborative education platform. In the meantime, let us know what you think in the comments, or chat with us directly using the in-app support chat tool. Kiddom’s mission is to unlock potential for all teachers and learners. With today’s redesigned platform launch, we’re excited to get one step closer to a world where more teachers have time to connect with and inspire students.


By: Abbas Manjee, Chief Academic Officer

Editor’s note: We’re testing the new Kiddom. If you signed up before March 5, 2017, you might not experience the new Kiddom just yet. We plan to conclude testing on Friday, March 10, 2017, at which time everyone will be on the new platform. For more information, contact our support team.

Introducing an iOS App for Teachers and Learners

Introducing an iOS App for Teachers and Learners

We’re building Kiddom to be a place where teachers and learners can work together effortlessly, no matter where they are. Today, we’re proud to release our first version of an iOS app that supports both teachers and learners. Our latest iOS app (optimized for iPhone and iPad) makes it easier than ever for teachers to plan, assess, and analyze student work. But most importantly, this is an app that students can use too, making it an effective way for 21st century students to stay organized, submit work, and get feedback in a timely manner.


Browse Premium, Standards-Aligned Content

Educators love Kiddom because we connect directly to premium, standards-aligned content. With our latest iOS app, teachers can browse and assign any of this content directly from their iOS devices.

Add your own assignments instantly. Or, Kiddom’s content library to assign content directly. Why reinvent the wheel?

Moving forward, a teacher doesn’t have to wait to get in front of a computer to browse Khan Academy’s videos for a student that requested additional guidance on a particular topic. A teacher that is assigned to cafeteria duty can still browse CK-12’s real-world activities to find the most appropriate exercise for students that are ready to apply what they learned in the previous class. And teachers that can’t access a computer because they share a room can still peruse CommonLit’s news articles, short stories, poems, and historical documents directly from the app. Yeah, we’d say teaching and learning just got a little more convenient.

21st Century Students Rely on Instant Feedback

Grading student work can grow to become a daunting exercise this season as quarters, trimesters, semesters, and all sorts of grading periods start to wrap-up. With our latest iOS app, teachers can assess student work and share critical feedback instantaneously.

Grade on the go, then easily analyze class performance and pivot instruction.

Students are free to ask their teachers questions on assignments in real-time from the convenience of their own iOS device. The ability for learners to learn on their own time and ask clarifying questions in-the-moment helps create a productive, continuous learning cycle. If students don’t have to wait until they physically see their teachers to get questions answered, then they’re free to learn more and get more done on their own time. We think that’s beautiful.

So, What’s Next?

We’re excited about this first version of a teacher and student iOS app, but we realize there’s more work to be done. We’ll continue to build more functionality for the iOS app over the next several months. In the meantime, download the app and let us know what you think in the comments.


By: Abbas Manjee, Chief Academic Officer

Kiddom’s mission is to unlock potential for all teachers and learners. With today’s iOS app launch, we’re excited to get one step closer to a world where teachers have the time to inspire students and students have the ability to learn on the device they’re most comfortable with, on their own terms.

It Wasn’t About Computer Programming

It Wasn’t About Computer Programming

When I was in high school, I was lucky enough to have a teacher whose teaching style made learning so fun and engaging that he inspired me to pursue my own career in education.

Photo Credit: Luis Llerena

Mr. Pecucci was my computer programming teacher my sophomore year, and for the first time in my life as a student, I never wanted to miss school (or at least, not until after second period computer programming). It wasn’t the class content, it was the fun and positive class experience Mr. Pecucci created. I was excited to learn, and I was excited to come to class, every single day.

Mr. Pecucci had an upbeat and engaging teaching style. I vividly remember the motivational quotes he shared with us at the start of the week. These helped make Mondays less rough. He made everyone clap for their peers if they completed a task in an extraordinary way or answered a question in a way he hadn’t thought of. The class felt like home, and I was there with friends who started to feel like family. Pecucci was teaching us computer programming, but we were also learning how to work together and build resilience.

Teamwork was essential in Pecucci’s class. He had a great way of teaching us the basics, and then leaving the hands-on material for group work. He’d chime in when he needed to, which wasn’t often on some days and on others, every five minutes. He wasn’t robotic, he could take the temperature of the room and adjust. Oddly, Pecucci’s criticism didn’t make me slam my head against the wall. Rather, the “culture” he’d created made me work harder. He made sure our goals were hard yet attainable, and that we were capable of succeeding.

Mr. Pecucci was good at relinquishing control sometimes and letting our imaginations run wild with our projects — as long as the work was completed. I remember we had to create our own video game as an assignment. He taught us the basics: creating sprites, getting them to move, creating functions, etc. Then he told us to run wild and make our own game, for a grade. There were no restrictions: as long as we displayed mastery of the program we used and met (or exceeded) expectations, we could make whatever we wanted. That whole week the class was loud with chatter, banter, and laughter. Students were in the classroom within the first minute of the prior class ending, which unless you were in an AP class, was unheard of. I made a game involving characters from the TV show “Metalocalypse” battling random celebrities I disliked. By the time I submitted the assignment, I was frustrated, yet satisfied. I got an “A,” but I would’ve been happy with just about anything because I was proud of my work. It ranks among one of the best assignments I was ever assigned in high school.

Mr. Pecucci worked with your character, rather than against it. We continue to stay in touch: he often chimes in on my achievements and accomplishments. But what I really hope is that he inspired me. I’ll attempt to mimic some of his methods when I’m ready to take on my own classroom.


Guest Post By: Shabbir Manjee
Teacher Advocate @ Kiddom
Aspiring Teacher

Originally published at Teacher Voice.

The Zuck Stops Here

The Zuck Stops Here

By now, most people know Mark Zuckerberg (CEO of the-application-responsible-for-making-you-think-you-live-an-unfulfilling-life) and his wife, Dr. Priscilla Chan, announced they’re giving away roughly 99% of their wealth (about $45 billion) to charity. In their letter, they highlighted “personalized learning” as an initiative the charity will focus on.

I’ve read and heard mixed opinions, which is a good thing, but what disappoints me are the overly reactionary and negative views some educators have written. We should not be so quick to judge the so-called “charity’s” efforts — they haven’t really even done anything yet. As a former high school teacher, I’m curious what the Chan Zuckerberg Initiative will invest in and develop. If what they’re investing in is anything like the software Facebook is piloting with Summit Schools, it could be a good thing people!

To be 100% clear, I am skeptical of the Chan Zuckerberg Initiative’s plans for education. All educators should be: Silicon Valley and its billionaire children haven’t exactly had a record of success in education. The Gates Foundation can be credited for tying students’ test scores to teacher evaluations. Imagine if we imported this practice into the medical world where patients’ lifestyles (and their inherited genetics) were factored into doctors’ ratings. If it sounds ridiculous to hold doctors accountable this way, it’s the same for teachers and I cannot support that.

However, Gates is just one example. As educators in a complex 21st century, we teach our students to avoid judging the many from the few. Perhaps we should take our own advice. I urge all active (and inactive) educators to approach the Chan Zuckerberg Initiative to get in on what they have in store. Let us be a force for collaboration and guidance. We can’t tell our students to be “life long learners” but then shut the door and put headphones on with the threat of change on the horizon.

As all teachers are aware, teachers do more than just teach. They’re role models, counselors, friends, advocates, coaches, and ultimately, subordinates to administrators. Teachers have two sets of audiences to please: students and administrators (and technically parents too, sadly depending on what zip code you teach in). Students and administrators have different (and often conflicting) needs. Administrators performing class observations may miss a completely engaged class and instead focus on a checklist of basic, low-impact chores: failing to update bulletin boards and data walls or failing to post an objective on the chalkboard.

When I was teaching, I investigated technology that could’ve eased my burden by even by a little. I was always trying to be efficient. Why? Because I knew what the job wanted me to do and what I actually could do was in conflict. What if I actually had the time to make authentic, individual assessments for my students on a daily basis? That might’ve made me less jaded about this industry than I am today.

As former and current educators, we should set the example to be proactive (and not reactionary) when someone “invades” our turf. From what I’ve read and heard, Facebook’s team works directly with Summit’s school teachers to learn about the colossal demands made upon them in our increasingly archaic system. Sometimes, it may take an outsider ten feet away to propose a remedy to an enduring headache.

Critics of the Chan Zuckerberg Initiative have even starting knocking on Max’s future education. Max is their newborn daughter, and while I admit writing an open letter to her to announce the Initiative was in poor taste, she’s still an infant.

“She [Max] will likely get small classes and individualized attention…”

Every student deserves small classes, individualized support, and love. I bet by the time Max is old enough to actually attend school, she’ll be learning some lessons via video, submitting work online, and completing tasks remotely. I bet Max’s teacher will likely feel his/her job as a teacher is less Herculean and likely more manageable. Maybe because some aspects of the job will be remedied with technology. Perhaps Max’s future teachers will have the luxury to try new approaches in the classroom to shake things up, something their predecessors may not have been able to do because their system simply wasn’t built for them to do so. Nobody knows, so I was seriously disappointed to read such blatant clickbait written by the education world’s most respected professionals.

Yes, most public school students don’t have small classes and loving tutors. But let’s be real: that’s not the private sector’s fault: that’s our own education system’s fault for (1) failing to remedy a crumbling system and (2) continuing to burden educators with more and more responsibilities without providing added human capital or technology. The private sector sees the American outdated education system as an “opportunity” (as any company would in a capitalist society) and is stepping in due to the failure of our own education policies.

If we’re unwilling to at least approach the companies willing to invest in our industry, then who do we have left? I would rather take help from a private company wiling to listen to my woes than from our legislators and governors, who are still flip-flopping on whether student test scores should impact teaching evaluations. These are also the same people who are about to pass the “Every Student Succeeds Act,” which in essence, is Congress’s way of giving us a shoulder shrug.

By: Abbas Manjee
Chief Academic Officer @ Kiddom
Former HS Math Teacher