Bold Text ในแอปมือถือ: คืออะไรและวิธีการกำหนดค่าข้อความตัวหนา

Bold Text ในด้านการเข้าถึงคืออะไร?

Bold Text คือการตั้งค่าระบบในระบบปฏิบัติการที่บังคับใช้น้ำหนักฟอนต์ตัวหนาสำหรับองค์ประกอบข้อความทั้งหมดในอินเทอร์เฟซแทนน้ำหนักมาตรฐาน (regular หรือ normal) ต่างจากการเพิ่มขนาดฟอนต์เพียงอย่างเดียว Bold Text ไม่เปลี่ยนสเกล — แต่เพิ่มความหนาของเส้นตัวอักษร ทำให้ดูเข้มข้นและคมชัดมากขึ้นเมื่อเทียบกับพื้นหลัง

คุณสมบัตินี้อยู่ในหมวด display accommodations — การตั้งค่าหน้าจอที่ช่วยให้ผู้ที่มีความบกพร่องทางการมองเห็นรับรู้ข้อมูลได้สบายตายิ่งขึ้น Bold Text มีประสิทธิภาพโดยเฉพาะสำหรับผู้ที่มีสายตาเลือนราง (ตามัว) สายตายาวตามอายุ ( presbyopia) และดิสเล็กเซียบางรูปแบบที่ตัวอักษรดูซ้อนหรือเบลอที่ความหนามาตรฐาน

ข้อความตัวหนาช่วยเพิ่ม ความสามารถในการอ่าน — ความเร็วและความแม่นยำในการจำแนกตัวอักษรแต่ละตัว การศึกษาจาก Usability.gov แสดงให้เห็นว่าฟอนต์ตัวหนาช่วยเพิ่มความแม่นยำในการอ่านได้ 12–18% ในผู้ใช้ที่มีความบกพร่องทางการมองเห็นเมื่อเทียบกับฟอนต์ปกติที่ขนาดจุดเดียวกัน อย่างไรก็ตาม Bold Text ไม่ได้แทนที่การขยายข้อความ — สามารถใช้ทั้งสองคุณสมบัติร่วมกันได้

ความแตกต่างระหว่าง Bold Text และการขยายฟอนต์

ความแตกต่างหลักระหว่าง Bold Text และ Dynamic Type (iOS) หรือ Font Size (Android) คือกลไกการทำงาน การขยายฟอนต์เปลี่ยนขนาดตัวอักษร ในขณะที่ Bold Text ส่งผลต่อความหนาเท่านั้น เมื่อขยายฟอนต์ ความจุของหน้าจอจะลดลง (เนื้อหาลงบนหน้าจอได้น้อยลง) ในขณะที่ Bold Text ยังคงจำนวนองค์ประกอบที่มองเห็นได้ สำหรับผู้ใช้ที่มีสายตายาวตามอายุในระยะเริ่มต้น Bold Text มักจะเพียงพอโดยไม่ต้องขยายข้อความ

ใครต้องการ Bold Text

กลุ่มเป้าหมายหลักของ Bold Text คือผู้ที่มีภาวะตามัว (สายตาเลือนรางที่ไม่สามารถแก้ไขด้วยแว่นตา) สายตายาวตามอายุ (หลังจากอายุ 40–45 ปี) และดิสเล็กเซียบางรูปแบบ คุณสมบัตินี้ยังมีประโยชน์เมื่ออ่านกลางแดดจ้า — ข้อความตัวหนายังคงความคมชัดแม้มีแสงสะท้อน เทคโนโลยีช่วยเหลือเช่น VoiceOver และ TalkBack ทำงานแยกจาก Bold Text — การตั้งค่าส่งผลต่อการแสดงผลทางภาพเท่านั้น

Bold Text ใน iOS: การตั้งค่าและหลักการทำงาน

ใน iOS Bold Text เป็นหนึ่งในคุณสมบัติการเข้าถึงที่เก่าแก่ที่สุด เปิดตัวใน iOS 7 (2013) การตั้งค่าอยู่ใน Settings > Display & Brightness > Bold Text และต้องรีสตาร์ท iPhone: ระบบสร้างฟอนต์ทั้งหมดในแอประบบ (Settings, Mail, Messages, Calendar, Notes) และแอปของบุคคลที่สามที่ใช้ฟอนต์ระบบ San Francisco ใหม่

ในทางเทคนิค iOS แทนที่ไฟล์ฟอนต์ระบบ San Francisco ด้วยรุ่น Bold (SF Pro Bold / SF Pro Rounded Bold) ในระดับ CoreText framework หลังจากเปิดใช้งาน Bold Text ข้อความทั้งหมดบนหน้าจอ — จากหัวนำทางไปจนถึงป้ายกำกับปุ่ม — จะแสดงด้วย font-weight 700 แทน 400 นักพัฒนาไม่สามารถแทนที่พฤติกรรมนี้สำหรับองค์ประกอบระบบ แต่สามารถจัดการฟอนต์ในอินเทอร์เฟซของตนเองผ่าน Dynamic Type

สำหรับ นักพัฒนา เมื่อเปิดใช้งาน Bold Text อินสแตนซ์ UIFont ทั้งหมดที่มี textStyle (.body, .headline, .caption และอื่นๆ) จะได้รับน้ำหนักตัวหนาโดยอัตโนมัติ UIFontWeight มีสองรูปแบบ: regular (0.0) และ bold (1.0) เมื่อ Bold Text ทำงาน ระบบจะเพิ่ม fontWeight ขึ้น 0.3–0.5 สำหรับแต่ละสไตล์ สามารถตรวจสอบสถานะได้ผ่าน UIAccessibility.isBoldTextEnabled

การตรวจสอบ Bold Text ในแอป iOS

นักพัฒนาสามารถตรวจสอบว่า Bold Text เปิดใช้งานบนอุปกรณ์หรือไม่และปรับอินเทอร์เฟซตามนั้น ตัวอย่างเช่น หากหัวตารางใช้ตัวหนาอยู่แล้ว การเปิดใช้งานคุณสมบัติอาจต้องลดน้ำหนักฟอนต์เพื่อหลีกเลี่ยงการรบกวนทางภาพ การตรวจสอบใช้เฟรมเวิร์ก UIAccessibility

import UIKit

class BoldTextManager {

    // การตรวจสอบสถานะ Bold Text
    static var isBoldTextEnabled: Bool {
        return UIAccessibility.isBoldTextEnabled
    }

    // การปรับฟอนต์สำหรับ Bold Text
    static func adjustedFont(
        textStyle: UIFont.TextStyle,
        weight: UIFont.Weight
    ) -> UIFont {
        let baseFont = UIFont.preferredFont(
            forTextStyle: textStyle
        )
        guard isBoldTextEnabled else {
            return baseFont
        }
        // ลดความหนาเพื่อหลีกเลี่ยง 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
        )
    }

    // ฟอนต์แคชที่รองรับ Bold Text
    static func labelFont() -> UIFont {
        return adjustedFont(
            textStyle: .body,
            weight: .regular
        )
    }
}

// สมัครรับการเปลี่ยนแปลง Bold Text (การแจ้งเตือน)
NotificationCenter.default.addObserver(
    self,
    selector: #selector(boldTextStatusChanged),
    name: UIAccessibility.boldTextStatusDidChangeNotification,
    object: nil
)

@objc func boldTextStatusChanged() {
    // อัปเดตอินเทอร์เฟซเมื่อ Bold Text เปลี่ยนแปลง
    updateFonts()
}

คลาส BoldTextManager ตรวจสอบ isBoldTextEnabled ปรับน้ำหนักฟอนต์ (ลด heavy/bold เป็น semibold/medium เมื่อคุณสมบัติทำงาน) และสมัครรับการแจ้งเตือน boldTextStatusDidChangeNotification ซึ่งป้องกันเอฟเฟกต์ double-bold ที่นักพัฒนาใช้ตัวหนาสำหรับหัวเรื่องอยู่แล้วและระบบทำให้หนาขึ้นอีก

ผลกระทบต่อ UITableView และ UICollectionView

Bold Text ส่งผลต่อเค้าโครงของเซลล์ UITableView และ UICollectionView เนื่องจากความหนาฟอนต์ที่เพิ่มขึ้นอาจเปลี่ยนความสูงของแถว เมื่อใช้เซลล์ที่ปรับขนาดเอง (estimatedRowHeight + UITableView.automaticDimension) iOS จะคำนวณความสูงใหม่โดยอัตโนมัติเมื่อฟอนต์เปลี่ยน สำหรับความสูงเซลล์คงที่ นักพัฒนาต้องเรียก reloadData() หลังจากได้รับการแจ้งเตือน boldTextStatusDidChangeNotification มิฉะนั้นข้อความอาจถูกตัด

Improve Readability ใน Android: สิ่งที่เทียบเท่า Bold Text

ใน Android คุณสมบัติ Bold Text เรียกว่า “Improve Readability” ในอินเทอร์เฟซการตั้งค่าและอยู่ในส่วนการเข้าถึง ในบางเวอร์ชันของ Android โดยเฉพาะบนอุปกรณ์ Samsung One UI คุณสมบัตินี้เรียกว่า “High Contrast Text” การตั้งค่านี้ใช้กับองค์ประกอบระบบทั้งหมดและแอปของบุคคลที่สามส่วนใหญ่

การใช้งานทางเทคนิคใน Android แตกต่างจาก iOS: แทนที่จะแทนที่ฟอนต์ระบบ Android จะแทนที่ Typeface ในระดับระบบผ่าน Resources.Theme เมื่อเปิดใช้งานการตั้งค่า ระบบจะเปลี่ยนแอตทริบิวต์ android:textStyle สำหรับองค์ประกอบข้อความทั้งหมด โดยตั้งค่า bold หรือ italic+bold นักพัฒนาสามารถตรวจสอบสถานะผ่าน Settings.Global.getFloat() หรือ AccessibilityManager

การตรวจสอบ Bold Text ในแอป Android

ใน Android ไม่มี API โดยตรงที่เทียบเท่ากับ UIAccessibility.isBoldTextEnabled การตรวจสอบทำผ่าน ContentResolver และ Settings.System การตั้งค่าถูกเก็บไว้ในการตั้งค่าส่วนกลางเป็น font_weight_adjustment สำหรับ Jetpack Compose สามารถเข้าถึงได้ผ่าน LocalDensity และ fontScale

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

class AndroidBoldTextHelper {

    // การตรวจสอบความสามารถในการอ่านที่ปรับปรุงผ่านการตั้งค่าระบบ
    fun isBoldTextEnabled(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "font_weight_adjustment"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — การปรับ 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 — การใช้งานผ่าน TypedValue
    fun applyBoldStyleFix(context: Context, textView: android.widget.TextView) {
        if (isBoldTextEnabled(context)) {
            val paint = textView.paint
            val fakeBold = paint.isFakeBoldText
            // ลด fakeBold หากเปิดใช้งานโดยระบบแล้ว
            if (fakeBold) {
                paint.isFakeBoldText = false
                textView.invalidate()
            }
        }
    }
}

คลาส AndroidBoldTextHelper อ่านการตั้งค่าระบบ font_weight_adjustment ปรับ FontWeight ใน Jetpack Compose และลบ fakeBold ที่ซ้ำกันใน XML View ต่างจาก iOS ตรงที่ Android ไม่มีช่องทางการแจ้งเตือนสำหรับการเปลี่ยนแปลง Bold Text — นักพัฒนาตรวจสอบการตั้งค่าเมื่อเริ่ม Activity หรือผ่าน ContentObserver

ContentObserver สำหรับติดตามการเปลี่ยนแปลง

เพื่อติดตามการเปลี่ยนแปลง Bold Text ในขณะรันไทม์ นักพัฒนา Android สามารถใช้ ContentObserver เมื่อการตั้งค่า font_weight_adjustment เปลี่ยนแปลง ระบบจะแจ้ง ContentResolver และแอปสามารถอัปเดตอินเทอร์เฟซได้ ซึ่งสำคัญสำหรับ AccessibilityService และลอนเชอร์แบบกำหนดเองที่ต้องตอบสนองต่อการเปลี่ยนแปลงการตั้งค่าของผู้ใช้ทันที

CSS font-weight: ประเภทความหนาของฟอนต์

ในการพัฒนาเว็บ ความหนาของฟอนต์ถูกควบคุมโดยคุณสมบัติ CSS font-weight ด้วยค่าตั้งแต่ 100 (Thin) ถึง 900 (Black) ค่ามาตรฐานรวมถึง normal = 400 และ bold = 700 Bold Text ในระบบปฏิบัติการไม่ส่งผลโดยตรงต่อ CSS font-weight — เบราว์เซอร์เว็บไม่ได้รับสัญญาณระบบเกี่ยวกับการเปิดใช้งาน Bold Text ในระดับ CSS อย่างไรก็ตาม นักพัฒนาสามารถใช้ media feature ของ CSS ได้หากแพลตฟอร์มรองรับ

สำหรับ iOS Safari รองรับ media function -webkit-text-size-adjust แต่ไม่มี media query โดยตรงสำหรับ Bold Text ใน Android Chrome ก็ไม่มี media query สำหรับการตั้งค่าข้อความตัวหนาของระบบเช่นกัน แนะนำให้นักพัฒนาเว็บใช้ prefers-contrast และ prefers-reduced-motion สำหรับการปรับตัว และสำหรับข้อความตัวหนา — ตรวจสอบการตั้งค่าผ่าน User-Agent หรือสไตล์สำรอง

การใช้ฟอนต์แปรผัน (Variable Fonts)

ฟอนต์แปรผัน (OpenType Font Variations) ช่วยให้ปรับความหนาของฟอนต์ได้อย่างราบรื่นผ่าน CSS font-weight ในช่วง 1–999 โดยเพิ่มครั้งละ 1 หน่วย ต่างจากฟอนต์มาตรฐานที่มีเฉพาะค่าไม่ต่อเนื่อง (400, 700) ฟอนต์แปรผันช่วยให้เลือกน้ำหนักที่เหมาะสมที่สุดสำหรับผู้ใช้แต่ละคน สามารถใช้ช่วงที่กว้างขึ้นสำหรับการตั้งค่าการเข้าถึง

/* ฟอนต์แปรผันพร้อมการปรับความหนาอย่างราบรื่น */
@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/Inter-Variable.woff2")
        format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
}

/* การปรับตัวเข้ากับ Bold Text ของระบบผ่านคลาส */
.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 — แนวทางสำรอง */
@media (prefers-contrast: more) {
    .content {
        --font-weight-increase: 100;
    }
    .content .text {
        font-weight: calc(
            var(--font-weight-base) +
            var(--font-weight-increase)
        );
    }
}

ตัวอย่าง CSS แสดงวิธีการโหลดฟอนต์แปรผัน Inter Variable ใช้คุณสมบัติกำหนดเองของ CSS เพื่อควบคุมน้ำหนัก และปรับตัวผ่าน prefers-contrast: more ฟอนต์แปรผันช่วยให้เพิ่ม font-weight ได้ 50–100 หน่วยเมื่อเปิดใช้งาน Bold Text ของระบบโดยไม่สูญเสียคุณภาพการเรนเดอร์ ในการตรวจจับสถานะ Bold Text บนไคลเอนต์ JavaScript สามารถตรวจสอบ User-Agent และเพิ่มคลาสให้กับองค์ประกอบ html

การตรวจจับ Bold Text ด้วย JavaScript บนหน้าเว็บ

เนื่องจาก CSS ไม่มี media query โดยตรงสำหรับ Bold Text นักพัฒนาเว็บจึงใช้ JavaScript: สร้างองค์ประกอบที่มองไม่เห็นด้วยฟอนต์ที่รู้จัก วัดความกว้าง เปลี่ยน font-weight และเปรียบเทียบความแตกต่าง หากความแตกต่างมากกว่าที่คาดไว้ แสดงว่า Bold Text ของระบบกำลังทำงานอยู่ วิธีนี้ใช้ในไลบรารีการเข้าถึงสำหรับการปรับสไตล์อัตโนมัติ

Bold Text ส่งผลต่อการเข้าถึงแอปอย่างไร

Bold Text จัดการปัญหาเฉพาะของผู้ใช้ที่มีความบกพร่องทางการมองเห็น: ช่วยเพิ่มความสามารถในการแยกแยะตัวอักษรในผู้ที่มีภาวะตามัว ลดความเมื่อยล้าทางสายตาระหว่างการอ่านเป็นเวลานาน และชดเชยความคมชัดของหน้าจอต่ำกลางแดดจ้า ตามข้อมูลของ WebAIM Million (2025) 12.3% ของหน้าทั้งหมดมีข้อความที่มีความคมชัดไม่เพียงพอ — Bold Text สามารถชดเชยข้อบกพร่องนี้บางส่วนในฝั่งผู้ใช้

สำหรับ นักพัฒนา การรองรับ Bold Text เป็นส่วนหนึ่งของข้อกำหนด WCAG 2.2: เกณฑ์ 1.4.1 (การใช้สี) และ 1.4.3 (ความคมชัดขั้นต่ำ) แอปต้องแสดงผลอย่างถูกต้องเมื่อเปิดใช้งานการตั้งค่า Bold Text ของระบบโดยไม่สูญเสียเนื้อหา องค์ประกอบซ้อนทับกัน หรือข้อความถูกตัด การทดสอบกับ Bold Text ที่เปิดใช้งานเป็นสิ่งจำเป็นเมื่อเตรียมเผยแพร่ใน App Store และ Google Play

คำแนะนำในการทดสอบ

เมื่อทดสอบแอปด้วย Bold Text ให้ตรวจสอบ: องค์ประกอบข้อความทั้งหมดแสดงอย่างสมบูรณ์หรือไม่ (ไม่ถูกตัด) ความหนาซ้ำกันหรือไม่ (double-bold) ความสูงของเซลล์ในตารางคำนวณใหม่ถูกต้องหรือไม่ และองค์ประกอบเลื่อนสัมพันธ์กันหรือไม่ ใช้ Accessibility Inspector (Xcode) หรือ Accessibility Scanner (Android) เพื่อตรวจจับปัญหากับ Bold Text โดยอัตโนมัติ

• Xcode Accessibility Inspector — ตรวจสอบฟอนต์ด้วยการจำลองโหมด Bold Text
• Android Accessibility Scanner — ตรวจจับอัตราส่วนความคมชัดและการซ้ำของ font-weight
• การทดสอบ UI — ทดสอบภาพหน้าจอด้วย Bold Text เปิดและปิด
• การทดสอบ Dynamic Type — การรวม Bold Text + ฟอนต์ขยาย

อนาคตของ Bold Text บนแพลตฟอร์มมือถือ

iOS และ Android สมัยใหม่กำลังพัฒนา Bold Text ไปสู่การควบคุมที่ละเอียดยิ่งขึ้น: iOS 18 (2024) เพิ่มการตั้งค่าฟอนต์ต่อแอป รวมถึงน้ำหนักตัวหนา และ Android 16 (2025) ขยาย API font_weight_adjustment สำหรับนักพัฒนา คาดว่ารุ่นอนาคตจะให้ media query ของ CSS สำหรับ Bold Text ซึ่งช่วยลดความจำเป็นในการตรวจจับด้วย JavaScript