{"id":35840,"date":"2021-11-25T14:48:59","date_gmt":"2021-11-25T14:48:59","guid":{"rendered":"https:\/\/ubuntuhandbook.org\/?p=35840"},"modified":"2021-11-25T14:48:59","modified_gmt":"2021-11-25T14:48:59","slug":"gtk-app-check-contrast-ratio-linux","status":"publish","type":"post","link":"https:\/\/ubuntuhandbook.org\/index.php\/2021\/11\/gtk-app-check-contrast-ratio-linux\/","title":{"rendered":"This GTK App Checks Contrast Ratio Between 2 Colors in Ubuntu Linux"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Designers and website developers may sometimes need to check WCAG<\/a> color contrast<\/b> to make web content more accessible to people with disabilities.<\/p>\n

Without using an online website each time, Linux has a stylish GTK4 app “Contrast”<\/a> which allows to check whether the contrast between two colors meet the WCAG requirements.<\/p>\n

The app has a simple user interface that displays one color as background and another as font color of the text<\/b>. By clicking on the double arrow icon between two color codes, it reverses background color as text font and font color as background. <\/p>\n

User may select color either by clicking on the circle icon before hex code (e.g., #F3F6F9<\/i>), or by using the color picker tool after the code.<\/p>\n

\"\"<\/a>

Contrast Select Color<\/p><\/div>\n

The app will display color contrast result with text, such as “Awesome<\/i>, Pretty Good<\/i>, Not Bad<\/i>, and Nope<\/i>, along with short description tells whether the color combination will properly work. <\/p>\n

\"\"<\/a><\/p>\n

It also displays a score bar tells that if the color contrast meets the 3 WCAG Levels: A, AA and AAA<\/a>. And, a contrast ratio is displayed at the bottom.<\/p>\n

\"\"<\/a>

Reversed colors<\/p><\/div>\n

How to Install Contrast in Ubuntu Linux:<\/h3>\n

As a GTK4 app, Contrast so far only available to install as Flatpak<\/a> which runs in sandbox. <\/p>\n

1. Firstly, press Ctrl+Alt+T<\/b> on keyboard and open terminal. When it opens, run command to install the Flatpak daemon:<\/p>\n

sudo apt install flatpak<\/pre>\n
For Ubuntu 18.04 and Ubuntu 16.04, the flatpak PPA<\/a> is required to get the package.<\/p>\n
\"\"<\/a><\/p>\n
2. Next, run command to install the WCAG color contrast app:<\/p>\n
flatpak install https:\/\/dl.flathub.org\/repo\/appstream\/org.gnome.design.Contrast.flatpakref<\/pre>\n
Note: If you’re first time installing a Gnome app as Flatpak, it will install the required GNOME 41 platform as shared runtime libraries, which take hundreds of megabytes disk space.<\/p>\n
\"\"<\/a><\/p>\n
Once installed, search for and open the app from activities overview screen. <\/p>\n
How to Remove Contrast Flatpak app:<\/h3>\n
To remove the software package, press Ctrl+Alt+T and run command in terminal:<\/p>\n
flatpak uninstall --delete-data org.gnome.design.Contrast<\/pre>\n
And use flatpak uninstall --unused<\/code> command may remove useless run-times if any.<\/p>","protected":false},"excerpt":{"rendered":"
Designers and website developers may sometimes need to check WCAG color contrast to make web content more accessible to people with disabilities. Without using an online website each time, Linux has a stylish GTK4 app “Contrast” which allows to check whether the contrast between two colors meet the WCAG requirements. The app has a simple […]<\/p>\n","protected":false},"author":1,"featured_media":35841,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[2055],"class_list":["post-35840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howtos","tag-wcag-color-contrast-linux"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/35840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/comments?post=35840"}],"version-history":[{"count":0,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/35840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media\/35841"}],"wp:attachment":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media?parent=35840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/categories?post=35840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/tags?post=35840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}