Sebilangan besar tempat untuk mempertimbangkan kontras dalam satu perenggan

Apabila kita berfikir tentang memilih warna dalam reka bentuk, kita sentiasa berfikir tentang aksesibiliti. Apabila warna menyentuh, terdapat kontras dan, jika kita bercakap tentang kontras warna teks, ia perlu cukup tinggi untuk dibaca. Ini memberi manfaat kepada orang yang mempunyai pelbagai kecacatan visual, tetapi juga semua orang menghargai teks yang mudah dibaca.

Mari kita lihat pertimbangan kontras warna hanya satu perenggan!

Pautan dalam perenggan mungkin ditetapkan dalam warna lain untuk membezakannya sebagai pautan.

Unsur -unsur yang fokus, seperti pautan, perlu mempunyai gaya fokus juga. Secara lalai, kami mungkin akan mendapat garis besar biru kabur, jadi kami perlu menyemak bahawa ia mempunyai kontras warna yang mencukupi. Dan jika kita menyesuaikannya, penyesuaian itu memerlukan perbezaan warna yang baik juga.

Kami juga memerlukan keadaan hover untuk pengguna tetikus. Di sini, saya akan menggunakan kesan latar belakang yang meliputi kira -kira separuh teks. Apabila anda melakukan sesuatu seperti itu, kesannya perlu cukup kuat untuk dilihat pada hover, dan kontras perlu berfungsi pada kedua -dua latar belakang.

Ia bukan ultra biasa, tetapi anda boleh gaya: pautan yang dikunjungi juga. Gaya ini agak terhad (anda tidak boleh mengubah kelegapan atau latar belakang, sebagai contoh, kerana ia adalah kebimbangan keselamatan), tetapi anda boleh mengubah warna. Jika anda berbuat demikian, ia juga memerlukan kontras yang betul. Mungkin kita boleh membezakan pembezaan warna dengan warna: mewarisi; Untuk agak menekankan pautan tetapi masih menunjukkannya.

Perkara lain yang perlu dipertimbangkan ialah orang yang menonjolkan teks. Pada mesin saya, saya telah disediakan untuk menyerlahkan dalam warna oren secara lalai (biasanya biru muda pada macOS).

Mudah -mudahan, warna pautan memegang di bawah mana -mana pilihan warna sorotan pengguna mungkin ada. Mereka cenderung menjadi warna yang sangat ringan.

Anda boleh mengawal warna pemilihan teks melalui CSS juga dengan :: pemilihan {latar belakang: ungu; }. Jika anda telah melakukannya, anda perlu menyemak semua warna anda sekali lagi untuk memastikan anda mendapat kontras yang mencukupi.

Anda boleh cuba mengambil langkah -langkah ke tangan anda sendiri dengan menukar kedua -dua warna dan latar belakang.

Tetapi ambil perhatian bahawa pautan di dalam teks telah kehilangan beberapa kontrasnya di sini. Kita boleh terus turun lubang arnab dengan menetapkan warna baru pada pemilihan :: dan setiap elemen lain yang mempunyai warna sendiri dalam teks.

Saya akan mengatakan peraturan yang baik adalah untuk pergi sangat ringan jika anda akan melakukan warna yang menyerlahkan adat dan kemudian tidak melakukan penyesuaian lanjut khusus untuk teks yang dipilih.

Idea untuk siaran ini datang dari beberapa laporan bug yang saya dapatkan dari orang yang melaporkan bahawa pautan sukar dibaca di laman web ini apabila menonjolkan teks, kemudian memfokuskan pautan. Saya cuba membetulkannya dengan mendapatkan lebih terperinci, tetapi ada batasan untuk apa yang boleh anda lakukan.

 :: Pemilihan A: Fokus { / * nope * /}
A: Fokus :: Pemilihan { / * nope * /}
A :: Pemilihan: Fokus { / * nope * /}

Lebih baik dikendalikan dengan melakukan kurang daripada lebih.

Saya baru -baru ini membaca reka bentuk Ethan Muller untuk Sistem Reka Bentuk Sistem dan dia membuat titik yang sama tentang kontras, tetapi merentasi spektrum warna dan bukannya merentasi konteks. Sebagai contoh, warna pautan biru anda mungkin berfungsi dengan baik pada beberapa warna sistem reka bentuk anda, tetapi tidak begitu banyak pada orang lain.

Terdapat beberapa perkara yang mungkin membantu dengan ini.

• Nasihat generik "Setiap kali anda mengisytiharkan warna latar belakang, mengisytiharkan warna" mungkin membantu.
• Saya telah menggunakan kelas peringkat ibu bapa seperti pada cahaya untuk mengubah warna perkara secara meluas di dalam bekas berwarna terang.
• Saya telah menggunakan Sass Mixin untuk membantu menjadikannya lebih mudah untuk menukar pautan dan keadaan pautan, jadi saya lebih tepat untuk melakukannya apabila menukar latar belakang.

 @mixin linkstleText ($ linkColor) {
  {
    // kemas kini gaya pautan generik dengan $ linkcolor
    &: berlegar,
    &: fokus {
      // Juga tukar gaya hover/fokus, mungkin dengan mengubah $ linkcolor secara programatik
    }
  }
}

.variation {
   Latar Belakang: $ SomenewbgColor;
   LinkStleText ($ somenewlinkColor)
}

Baiklah, terima kasih kerana datang dalam perjalanan ini dengan saya. Ia hanya berlaku kepada saya bahawa kontras warna tidak semudah memeriksa warna pautan tunggal pada latar belakang untuk memastikan ia berlalu. Mungkin terdapat sedozen atau lebih banyak perkara untuk diperiksa bergantung kepada berapa banyak perkara yang anda mewarnakan dalam salinan badan anda.

Font dalam tangkapan skrin ini adalah Ibarra Real Nova, yang baru -baru ini dikeluarkan di Google Fonts.

Atas ialah kandungan terperinci Sebilangan besar tempat untuk mempertimbangkan kontras dalam satu perenggan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!