Bold Text di aplikasi seluler: apa itu, pengaturan teks tebal

Apa itu Bold Text dalam aksesibilitas?

Bold Text — adalah pengaturan sistem dari sistem operasi yang mewajibkan penggunaan font tebal untuk semua elemen teks antarmuka, bukan yang standar (regular atau normal). Berbeda dengan pembesaran ukuran font sederhana, Bold Text tidak mengubah skala — ia meningkatkan ketebalan garis huruf, membuatnya lebih jenuh dan kontras dengan latar belakang.

Fungsi ini termasuk dalam kategori display accommodations — pengaturan layar yang membantu penderita gangguan penglihatan menerima informasi dengan lebih nyaman. Bold Text sangat efektif untuk ketajaman penglihatan rendah (ambliopia), rabun jauh terkait usia (presbiopia) dan beberapa bentuk disleksia di mana huruf "berlipat ganda" atau "melayang" pada ketebalan standar.

Font tebal meningkatkan readability — kecepatan dan akurasi pengenalan karakter individual. Penelitian Usability.gov menunjukkan bahwa ketebalan bold meningkatkan akurasi membaca sebesar 12–18% pada pengguna dengan gangguan penglihatan dibandingkan dengan font regular dengan ukuran yang sama. Bold Text tidak menggantikan pembesaran teks — kedua fungsi dapat dikombinasikan.

Perbedaan Bold Text dengan pembesaran font

Perbedaan utama antara Bold Text dengan Dynamic Type (iOS) atau Font Size (Android) — mekanisme pengaruh. Pembesaran font mengubah ukuran huruf, Bold Text — hanya ketebalan. Dengan pembesaran font, kapasitas layar berkurang (lebih sedikit konten yang muat di satu layar), Bold Text mempertahankan jumlah elemen yang terlihat. Untuk pengguna dengan presbiopia pada tahap awal, Bold Text sering kali cukup tanpa pembesaran teks.

Siapa yang membutuhkan Bold Text

Audien utama Bold Text — penderita ambliopia (penurunan ketajaman penglihatan yang tidak dapat dikoreksi dengan kacamata), presbiopia (rabun jauh terkait usia setelah 40–45 tahun) dan beberapa bentuk disleksia. Fungsi ini juga berguna saat membaca di bawah sinar matahari yang terang — font tebal mempertahankan kontras saat silau. Teknologi bantu seperti VoiceOver dan TalkBack bekerja secara independen dari Bold Text — pengaturan hanya mempengaruhi tampilan visual.

Bold Text di iOS: pengaturan dan prinsip kerja

Di iOS, Bold Text — salah satu fitur aksesibilitas tertua, yang muncul di iOS 7 (2013). Pengaturan berada di Settings > Display & Brightness > Bold Text dan memerlukan restart iPhone: sistem membangun ulang semua font di aplikasi sistem (Settings, Mail, Messages, Calendar, Notes) dan aplikasi pihak ketiga yang menggunakan font sistem San Francisco.

Secara teknis, iOS mengganti file font sistem San Francisco dengan varian Bold-nya (SF Pro Bold / SF Pro Rounded Bold) di tingkat framework CoreText. Setelah Bold Text diaktifkan, semua baris di layar — dari judul navigasi hingga teks tombol — ditampilkan dengan font-weight 700, bukan 400. Pengembang tidak dapat menimpa perilaku ini untuk elemen sistem, tetapi dapat mengelola font di UI sendiri melalui Dynamic Type.

Bagi pengembang, Bold Text yang aktif berarti semua UIFont dengan textStyle (.body, .headline, .caption dan lainnya) secara otomatis mendapatkan tampilan tebal. UIFontWeight tersedia dalam dua varian: regular (0.0) dan bold (1.0). Dengan Bold Text aktif, sistem meningkatkan fontWeight sebesar 0.3–0.5 untuk setiap gaya. Status dapat diperiksa melalui UIAccessibility.isBoldTextEnabled.

Memeriksa Bold Text di aplikasi iOS

Pengembang dapat memeriksa apakah Bold Text aktif di perangkat dan menyesuaikan antarmuka. Misalnya, jika judul tabel sudah menggunakan bold, dengan fungsi aktif mungkin perlu mengurangi ketebalan untuk menghindari kebisingan visual. Kode pemeriksaan menggunakan framework UIAccessibility.

import UIKit

class BoldTextManager {

    // Memeriksa status Bold Text
    static var isBoldTextEnabled: Bool {
        return UIAccessibility.isBoldTextEnabled
    }

    // Menyesuaikan font dengan Bold Text
    static func adjustedFont(
        textStyle: UIFont.TextStyle,
        weight: UIFont.Weight
    ) -> UIFont {
        let baseFont = UIFont.preferredFont(
            forTextStyle: textStyle
        )
        guard isBoldTextEnabled else {
            return baseFont
        }
        // Mengurangi ketebalan agar tidak terjadi double-bold
        let adjustedWeight: UIFont.Weight
        switch weight {
        case .bold, .heavy:
            adjustedWeight = .semibold
        case .semibold:
            adjustedWeight = .medium
        default:
            adjustedWeight = weight
        }
        return UIFont.systemFont(
            ofSize: baseFont.pointSize,
            weight: adjustedWeight
        )
    }

    // Font cache dengan dukungan Bold Text
    static func labelFont() -> UIFont {
        return adjustedFont(
            textStyle: .body,
            weight: .regular
        )
    }
}

// Berlangganan perubahan Bold Text (Notification)
NotificationCenter.default.addObserver(
    self,
    selector: #selector(boldTextStatusChanged),
    name: UIAccessibility.boldTextStatusDidChangeNotification,
    object: nil
)

@objc func boldTextStatusChanged() {
    // Memperbarui UI saat Bold Text berubah
    updateFonts()
}

Kelas BoldTextManager memeriksa isBoldTextEnabled, menyesuaikan berat font (mengurangi heavy/bold menjadi semibold/medium saat fungsi aktif) dan berlangganan pemberitahuan boldTextStatusDidChangeNotification. Ini mencegah efek double-bold, ketika pengembang sudah menggunakan bold untuk judul dan sistem menebalkannya lebih lanjut.

Pengaruh pada UITableView dan UICollectionView

Bold Text mempengaruhi tata letak sel UITableView dan UICollectionView, karena peningkatan ketebalan font dapat mengubah tinggi baris. Saat menggunakan self-sizing cells (estimatedRowHeight + UITableView.automaticDimension), iOS secara otomatis menghitung ulang tinggi saat font berubah. Untuk tinggi sel tetap, pengembang harus memanggil reloadData() setelah menerima pemberitahuan boldTextStatusDidChangeNotification, jika tidak teks dapat terpotong.

Keterbacaan yang Ditingkatkan di Android: analog Bold Text

Di Android, fungsi Bold Text disebut "Keterbacaan yang Ditingkatkan" (Improve readability) di antarmuka pengaturan dan berada di bagian "Aksesibilitas" (Accessibility). Di beberapa versi Android, terutama pada perangkat Samsung One UI, fungsi ini disebut "Teks Kontras Tinggi" atau High Contrast Text. Pengaturan berlaku untuk semua elemen sistem dan sebagian besar aplikasi pihak ketiga.

Implementasi teknis Android berbeda dari iOS: alih-alih mengganti font sistem, Android mengganti Typeface di tingkat sistem melalui Resources.Theme. Saat pengaturan diaktifkan, sistem mengubah atribut android:textStyle untuk semua elemen teks, mengatur bold atau italic+bold. Pengembang dapat memeriksa status melalui Settings.Global.getFloat() atau AccessibilityManager.

Memeriksa Bold Text di aplikasi Android

Di Android tidak ada API langsung yang setara dengan UIAccessibility.isBoldTextEnabled. Pemeriksaan dilakukan melalui ContentResolver dan Settings.System. Fungsi disimpan dalam pengaturan global sebagai font_weight_adjustment. Untuk Jetpack Compose tersedia melalui LocalDensity dan fontScale.

import android.content.Context
import android.provider.Settings
import android.util.TypedValue
import androidx.compose.ui.text.font.FontWeight

class AndroidBoldTextHelper {

    // Memeriksa keterbacaan yang ditingkatkan melalui pengaturan sistem
    fun isBoldTextEnabled(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "font_weight_adjustment"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — penyesuaian FontWeight
    fun adjustFontWeight(
        context: Context,
        original: FontWeight
    ): FontWeight {
        if (!isBoldTextEnabled(context)) return original

        return when (original) {
            FontWeight.Bold, FontWeight.ExtraBold -> FontWeight.SemiBold
            FontWeight.SemiBold -> FontWeight.Medium
            else -> original
        }
    }

    // XML View — penerapan melalui TypedValue
    fun applyBoldStyleFix(context: Context, textView: android.widget.TextView) {
        if (isBoldTextEnabled(context)) {
            val paint = textView.paint
            val fakeBold = paint.isFakeBoldText
            // Mengurangi fakeBold jika sudah diaktifkan oleh sistem
            if (fakeBold) {
                paint.isFakeBoldText = false
                textView.invalidate()
            }
        }
    }
}

Kelas AndroidBoldTextHelper membaca pengaturan sistem font_weight_adjustment, menyesuaikan FontWeight di Jetpack Compose dan menghapus fakeBold duplikat di XML View. Tidak seperti iOS, Android tidak menyediakan saluran pemberitahuan untuk perubahan Bold Text — pengembang memeriksa pengaturan saat memulai Activity atau melalui ContentObserver.

ContentObserver untuk melacak perubahan

Untuk melacak perubahan Bold Text saat runtime, pengembang Android dapat menggunakan ContentObserver. Saat pengaturan font_weight_adjustment berubah, sistem memberi tahu ContentResolver, dan aplikasi dapat memperbarui UI. Ini penting untuk AccessibilityService dan peluncur khusus yang harus segera merespons perubahan pengaturan pengguna.

CSS font-weight: jenis ketebalan font

Dalam pengembangan web, ketebalan font dikelola oleh properti CSS font-weight dengan nilai dari 100 (Thin) hingga 900 (Black). Nilai standar: normal = 400, bold = 700. Bold Text di sistem operasi tidak secara langsung memengaruhi CSS font-weight — peramban web tidak menerima sinyal sistem tentang Bold Text aktif di tingkat CSS. Namun, pengembang dapat menggunakan fungsi media CSS jika platform mendukungnya.

Untuk iOS, Safari mendukung fungsi media -webkit-text-size-adjust, tetapi tidak memiliki media query langsung untuk Bold Text. Di Android, Chrome juga tidak menyediakan media query untuk pengaturan sistem teks tebal. Pengembang web disarankan untuk menggunakan prefers-contrast dan prefers-reduced-motion untuk penyesuaian, dan untuk teks tebal — memeriksa pengaturan melalui User-Agent atau gaya cadangan.

Menggunakan font variabel (Variable Fonts)

Variable Fonts (OpenType Font Variations) memungkinkan penyesuaian ketebalan font secara halus melalui CSS font-weight dalam rentang 1–999 dengan langkah 1 unit. Berbeda dengan font standar di mana hanya nilai diskrit (400, 700) yang tersedia, variable fonts memberikan kemampuan untuk memilih ketebalan optimal untuk setiap pengguna. Pada pengaturan aksesibilitas, rentang yang lebih luas dapat digunakan.

/* Font variabel dengan penyesuaian ketebalan halus */
@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/Inter-Variable.woff2")
        format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
}

/* Penyesuaian dengan Bold Text sistem melalui kelas */
.bold-text-enabled {
    --font-weight-body: 500;
    --font-weight-heading: 700;
}

.bold-text-enabled .text-body {
    font-weight: var(--font-weight-body);
}

.bold-text-enabled .text-heading {
    font-weight: var(--font-weight-heading);
}

/* prefers-contrast: more — pendekatan cadangan */
@media (prefers-contrast: more) {
    .content {
        --font-weight-increase: 100;
    }
    .content .text {
        font-weight: calc(
            var(--font-weight-base) +
            var(--font-weight-increase)
        );
    }
}

Dalam contoh CSS ditunjukkan koneksi font variabel Inter Variable, variabel CSS untuk mengelola ketebalan dan penyesuaian melalui prefers-contrast: more. Variable fonts memungkinkan peningkatan font-weight sebesar 50–100 unit dengan Bold Text sistem aktif tanpa kehilangan kualitas rendering. Untuk menentukan status Bold Text di sisi klien, pemeriksaan JavaScript User-Agent dan kelas pada elemen html dapat digunakan.

Deteksi JavaScript Bold Text di halaman web

Karena CSS tidak menyediakan media query langsung untuk Bold Text, pengembang web menggunakan JavaScript: membuat elemen tak terlihat dengan font yang dikenal, mengukur lebarnya, mengubah font-weight dan membandingkan perbedaannya. Jika perbedaan lebih besar dari yang diharapkan — kemungkinan Bold Text sistem aktif. Metode ini digunakan dalam pustaka aksesibilitas untuk penyesuaian gaya otomatis.

Bagaimana Bold Text mempengaruhi aksesibilitas aplikasi

Bold Text memecahkan masalah spesifik pengguna dengan gangguan penglihatan: meningkatkan pembedaan simbol pada ambliopia, mengurangi kelelahan visual saat membaca lama dan mengompensasi kontras rendah layar di bawah sinar matahari terang. Menurut WebAIM Million (2025), 12.3% dari semua halaman memiliki teks dengan kontras yang tidak memadai — Bold Text dapat mengompensasi sebagian cacat ini di sisi pengguna.

Bagi pengembang, dukungan Bold Text termasuk dalam persyaratan WCAG 2.2: kriteria 1.4.1 (Use of Color) dan 1.4.3 (Contrast Minimum). Aplikasi harus ditampilkan dengan benar dengan pengaturan sistem Bold Text aktif tanpa kehilangan konten, tumpang tindih elemen atau pemotongan teks. Pengujian dengan Bold Text aktif adalah wajib saat persiapan penerbitan di App Store dan Google Play.

Rekomendasi pengujian

Saat menguji aplikasi dengan Bold Text periksa: apakah semua elemen teks ditampilkan sepenuhnya (tanpa terpotong), apakah ketebalan tidak terduplikasi (double-bold), apakah tinggi sel di tabel dihitung ulang dengan benar, apakah elemen tidak bergeser relatif satu sama lain. Gunakan Accessibility Inspector (Xcode) atau Accessibility Scanner (Android) untuk deteksi otomatis masalah dengan Bold Text.

• Xcode Accessibility Inspector — audit font dengan simulasi mode Bold Text
• Android Accessibility Scanner — pemeriksaan contrast ratio dan duplikasi font-weight
• UI Testing — tes tangkapan layar dengan Bold Text aktif dan nonaktif
• Dynamic Type testing — kombinasi Bold Text + font yang diperbesar

Masa depan Bold Text di platform seluler

iOS dan Android modern mengembangkan Bold Text menuju pengaturan yang lebih halus: iOS 18 (2024) menambahkan pengaturan font per-aplikasi termasuk ketebalan, dan Android 16 (2025) memperluas API font_weight_adjustment untuk pengembang. Diharapkan versi mendatang akan menyediakan pengembang web dengan media query CSS untuk Bold Text, menghilangkan kebutuhan deteksi JS.