# More Accessible Graphs with Jetpack Compose Part 3: Differentiating without Color

DevFeed: [More Accessible Graphs with Jetpack Compose Part 3: Differentiating without Color](<https://devfeed.tech/articles/more-accessible-graphs-with-jetpack-compose-part-3-differentiating-without-color-38462.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2023-08-16/more-accessible-graphs-with-jetpack-compose-part-3-differentiating-without/>)

Author: Eevis Panula

Published: 2025-06-11T04:27:29.325000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Graphs](<https://devfeed.tech/topics/graphs.md>), [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [color](<https://devfeed.tech/topics/color.md>), [Code](<https://devfeed.tech/topics/code.md>), [function](<https://devfeed.tech/topics/function.md>), [properties](<https://devfeed.tech/topics/properties.md>)

Tags: [accessible](<https://devfeed.tech/tags/accessible.md>), [code](<https://devfeed.tech/tags/code.md>), [color](<https://devfeed.tech/tags/color.md>), [function](<https://devfeed.tech/tags/function.md>), [graphs](<https://devfeed.tech/tags/graphs.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [properties](<https://devfeed.tech/tags/properties.md>)

## AI overview

The third article in a series on accessible graphs with Jetpack Compose explains why data should not be differentiated by color alone. It demonstrates using different point shapes and line patterns to improve distinguishability for people with color-vision differences and across screens with varying color reproduction.

## Source excerpt

This blog post is the third one in my series on more accessible graphs with Jetpack Compose. You can find the previous two from the following links: More Accessible Graphs with Jetpack Compose Part 1: Adding Content Description More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction The third topic we will cover is differentiating data by other means than color. Color is a convenient way to distinguish data, but what if you can't see color? Or what if you see colors differently? For example, the example project we've been developing during the blog post series would look like this for someone who can't see color at all: And someone with red-green color blindness: Another aspect of why not use color alone is that phone screens display color differently. A noticeable difference on a high-end external screen for a designer might be almost the same shades for a lower-end phone, making usage impossible. There are better ideas than just using color to differentiate data. In the next section, let's explore some of these other ways. Options for Color When talking about graphs, there are generally two ways to improve the distinguishability of data: Shapes and patterns. For example, if a bar chart is initially differentiated by color, adding patterns for different colors could differentiate those bars. For a line chart, both these options are valid. Let's explore both and differentiate the data by adding different shapes for points and some patterns for the line. This solution is not the most beautiful because I'm mixing these two options, but it's there to demonstrate, not to be a final design. The Code In the situation we're starting with, the function we're using to draw the data points looks like this: drawPoints( points = pixelPoints.map { Offset(it.x + 20f, it.y) }, pointMode = PointMode.Points, color = color, strokeWidth = 8.dp.toPx(), cap = StrokeCap.Round, ) It takes the points and point mode from the parameters, and other than that, everythin