Color Contrast Checker

Walktrough panduan/penilik kontras warna berikut ini dapat di pergunakan untuk meninjau dan mengevaluasi serta memperbaiki kombinasi warna latar dan warna konten. Panduan ini juga dapat di pergunakan sebagai pembelajaran keteraksesan warna yang di sajikan pada desain template web atau tema blog.

Penting : pemelajaran ini menjadikan warna dan visualisasi sebagai obyek evaluasi keteraksesan. Karena alasan tersebut, maka halaman ini sebaiknya di akses menggunakan peramban Web dengan tidak menonaktifkan fitur javascript dan CSS.

1. Prolog

Panduan/penilik kontras warna ini memerlukan input atau masukan warna dalam format HEX atau Hexadecimal. Jika warna latar dan warna konten/gambar/teks yang akan di evaluasi menggunakan format RGB, silahkan konversi menggunakan perangkat RGB ke HEX.

2. Formulir warna

Masukkan warna latar dan warna konten/gambar/teks yang akan di evalusi nilai keteraksesannya, pada formulir berikut :

Warna Latar

fill with hex format.

Warna Konten/Gambar/Teks

fill with hex format.

3. Contoh keluaran

Berikut adalah contoh visualisasi atau hasil keluaran kombinasi warna latar dan warna konten yang di masukkan dalam formulir warna pada langkah ke-dua.

Panduan keteraksesan kontras warna, less than 18pt not bold.
Panduan keteraksesan kontras warna, less than 14pt bold.
Panduan keteraksesan kontras warna, at least 18pt not bold.
Panduan keteraksesan kontras warna, at least 14pt bold.

4. Catatan keteraksesan

Menggunakan petunjuk keteraksesan konten Web, WCAG 1.0 dan WCAG 2.0, berikut adalah catatan kepatuhan pada nilai keteraksesan warna yang ditampilkan dalam contoh keluaran pada langkah ke-tiga, dari hasil masukan warna dalam formulir warna pada langkah ke-dua.

Kepatuhan

WCAG10 Checkpoint 2.2 :

WCAG20 :

Perbaiki warna latar atau Perbaiki warna konten

5. Perbaikan kontras warna & rasio kontras

Perbaikan kontras warna, sesuai petunjuk keteraksesan WCAG10 dan perbaikan rasio kontras, sesuai petunjuk keteraksesan WCAG20, dapat dilakukan dengan menggeser tuas masing-masing komponen warna latar atau komponen warna konten dibawah ini.

Perbaikan warna latar

 

 

 

 

 

 

Lihat perubahan catatan kepatuhan.

Perbaikan warna konten

 

 

 

 

 

 

Lihat perubahan catatan kepatuhan.

Konverter warna rgb menjadi hex

Warna rgb(  )  menjadi  .

Catat dan masukkan warna berformat hexadecimal sebagai warna latar atau warna konten pada isian formulir warna.

Referensi

Panduan keteraksesan kontras warna ini ditulis dan disajikan sebagai dokumentasi pribadi, karena beberapa orang dan beberapa hal antara lain sebagai berikut :

Slider (WebFX)
Slider (WebFX) v1.02, Erik Arvidsson, Created 2002-10-14, Updated 2006-05-28.
Colour Contrast Check - snook.ca
Colour Contrast Check, Jonathan Snook, Date created: January 11, 2005, Date last modified: December 6, 2009.
Kontras warna halaman web
Kontras warna halaman web, Dani Iswara, Posted: April 26, 2009 Last update: June 4,2009.